d3.interpolateTransformSvg returning an empty string

[GerardoFurtado]

Context: I'm using a transition for changing the "translate" transform function of some elements. Sometimes the position doesn't change, so the transition goes from foo to the same foo.

However, I've notice that when transitioning from "translate(0,0)" to "translate(0,0)" the interpolator returns an empty string. The interpolator in question is d3.interpolateTransformSvg.

For instance:

d3.interpolateTransformSvg("translate(1,1)","translate(0,0)")(1);
//returns "translate(0,0)", as expected

But:

d3.interpolateTransformSvg("translate(0,0)","translate(0,0)")(1);
//returns an empty string ""

Here is a basic demo: https://jsfiddle.net/bvudenyq/

I'm not sure if the issue is in d3.interpolateTransformSvg itself or in the parse.js file. The solution is quite simple, in my case I'm just using attrTween with d3.interpolateString as the interpolator, ditching d3.interpolateTransformSvg, but I thought I should mention this bug.

Thanks,

[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.

[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)"

[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.

[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!