在 D3 转换中获取预期的属性值

Question

For example I have a transition:

var sel = container.selectAll('div')
    .transition()
    .duration(1000)
    .attr('transform', 'translate(100,500)');

At some moment I need to know where some of the elements lands to, eg

setTimeout(() => {
    var value = d3.select('div#target')
        .expectedAttr('transform');
    assertEqual(value, 'translate(100,500)');
}, 500);

Is there built-in feature like this in D3? Otherwise I will have to write my own wrapper over d3.transition().attr() method for storing values passed to it.

Edit

I've found out that D3 creates __transition__ field on elements, which seems to contain info regarding the transition, but I see no way to find a target attribute value there.

Answer 1

At first I thought this would not be possible because the target value seemed to be inaccessibly hidden by a closure. With a little trick, though, this value can be retrieved.

You have to keep in mind that, when calling transition.attr() , D3 will do the following:

For each selected element, creates an attribute tween for the attribute with the specified name to the specified target value.

This automatically created tween can be accessed by calling transition.attrTween(attrName) .

When this tween gets called by D3 it will return an interpolator . This in turn has access to the target value which was closed over when creating the interpolator. When reading further down the docs the real trick becomes obvious:

The returned interpolator is then invoked for each frame of the transition, in order, being passed the eased time t , typically in the range [0, 1].

Knowing that the final value for t – at the end of the transition – will be 1 , you can call the previously obtained interpolator with this value which will yield the target value of the transition.

var targetValue = transition 
  .attrTween("x2")            // Get the tween for the desired attribute
  .call(line.node())          // Call the tween to get the interpolator
  (1);                        // Call the interpolator with 1 to get the target value

The following example shows this by printing the target value for an already running transition.

 var line = d3.select("line"); line .transition() .duration(2000) .attr("x2", 100); setTimeout(function() { var transition = d3.active(line.node()) // Get the active transition on the line var targetValue = transition .attrTween("x2") // Get the tween for the desired attribute .call(line.node()) // Call the tween to get the interpolator (1); // Call the interpolator with 1 to get the target value console.log(targetValue); // 100 }, 1000);

 <script src="https://d3js.org/d3.v4.js"></script> <svg><line x2="0" y2="100" stroke="black"></line></svg>

The same holds true for style transitions where you would use transition.styleTween() to get the tween.

Answer 2

Ran into this problem today and found altocumulus' answer very helpful. However, I discovered that (at least for the current d3-transition@2.0.0 ) if the current value is already at the target value, .call ing the attrTween will return null instead of the interpolator.

My solution wound up looking something like this:

const attrTargetValue = (selection, attr) => {
  const interpolator = selection
    .attrTween(attr)
    .call(selection.node());
  return interpolator === null
    ? selection.selection().attr(attr)
    : interpolator(1);
}