Transition.styleTween has incorrect signature

The signature of Transition.styleTween is currently:

styleTween(name: string, tween: (datum: Datum, index: number, attr: string) => Primitive, priority?: string): Transition<Datum>; (line 833)

Note that the tween is said to return a Primitive. This seems incorrect, both in terms of D3 intent and implementation.

The *correct* version appears to be:

styleTween(name: string, tween: (datum: Datum, index: number, attr: string) => (t: number) => Primitive, priority?: string): Transition<Datum>;

(This is similar to  similar to Transition.attrTween.)

First, the documentation states:

>>> The return value of tween must be an interpolator: a function that maps a parametric value t in the domain [0,1] 
>>>  to a color, number or arbitrary value.

Second, the source code of d3 3.5.5 has:

d3_transitionPrototype.styleTween = function(name, tween, priority) {
    if (arguments.length < 3) priority = "";
    function styleTween(d, i) {
      var f = tween.call(this, d, i, d3_window(this).getComputedStyle(this, null).getPropertyValue(name));
      return f && function(t) {
        this.style.setProperty(name, f(t), priority);
      };
    }
    return this.tween("style." + name, styleTween);
  };

Note the line "this.style.setProperty(name, f(t), priority);" where the result f of applying the tween is passed a parameter t. 

The only point of discussion might be the type of the return value of the tween's interpolator output. Is it Primitive or any? The documentation quoted above (incidentally the same for attrTween and styleTween) explicitly allows for an arbitrary value. I don't have enough D3 experience to know if this is a practically relevant possibility.

Many thanks for your great work on d3.d.ts!!! Especially the use of tweens and interpolators perfectly illustrates the benefits of Typescript.

Best wishes,

Matthias
This commit is contained in:
Matthias Hild
2015-08-06 19:02:28 -04:00
parent b45569f35d
commit 00c2478e98
Vendored
+1 -1
View File
@@ -830,7 +830,7 @@ declare module d3 {
style(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive, priority?: string): Transition<Datum>;
style(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }, priority?: string): Transition<Datum>;
styleTween(name: string, tween: (datum: Datum, index: number, attr: string) => Primitive, priority?: string): Transition<Datum>;
styleTween(name: string, tween: (datum: Datum, index: number, attr: string) => (t: number) => Primitive, priority?: string): Transition<Datum>;
text(value: Primitive): Transition<Datum>;
text(value: (datum: Datum, index: number, outerIndex: number) => Primitive): Transition<Datum>;