d3.interpolateTransformSvg returning an empty string about d3-interpolate

[mbostock]

Thank you for your patience. I’ll close, but I’ll also mention that I would like to change how interpolateTransform works in #44, such that we interpolate transform function lists (when the start and end transform have the same structure) rather than matrices. I think that would also address your needs here: since translate(1,1) and translate(0,0) have the same structure, we would return translate(0, 0) at the end (instead of the empty transform) if #44 were implemented.

But implementing this is non-trivial so I haven’t yet found time to do it. Contributions welcome!

[mbostock]

That’s not how d3.interpolateTransformSvg works; it decomposes the given transformation into a standard representation, and then interpolates that. So, it’s not guaranteed that the interpolated value at t = 1 is string-equal to the target value a, just that the two will be equivalent transforms. This property is true of many of D3’s interpolators. For example, d3.interpolate("red", "blue")(1) returns "rgb(0, 0, 255)", which is the standard representation of a color in CSS.

When you say “a code that tries to get the current transform value for calculating the next one will break”, what do you mean? d3.interpolateTransformSvg seems to work fine when interpolating from the empty string to a non-empty transform:

d3.interpolateTransformSvg("", "translate(100, 0)")(0.5) // "translate(50, 0)"

[mbostock]

Isn’t the empty string equivalent to translate(0,0)? What’s the problem?

[GerardoFurtado]

The problem is just lack of consistency. The interpolator should return the target value for t = 1 no matter what, not deciding for an empty string: using an empty string with attr() actually removes the attribute, turning this...

<foo transform="translate(x,y)"></foo>

...into this:

<foo transform></foo>

Thus, in the next iteration, a code that tries to get the current transform value for calculating the next one will break.

[GerardoFurtado]

I meant a code that uses attr("transform") or this.getAttribute("transform") to get the current transform value.

Anyway, now I see this is by design. Thanks for your explanation, as always it was very useful.