在D3过渡中获得预期的属性值

Question

例如,我有一个过渡:

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

在某些时刻,我需要知道一些元素落在哪里,例如

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

D3中有这样的内置功能吗？否则,我将不得不编写自己的包装d3.transition().attr()方法来存储传递给它的值.

编辑

我发现D3 __transition__在元素上创建了字段,它似乎包含有关转换的信息,但我看不到在那里找到目标属性值.

Answer 1

起初我认为这是不可能的,因为目标值似乎被闭包无法隐藏.但是,通过一个小技巧,可以检索此值.

您必须记住,在致电时transition.attr(),D3将执行以下操作:

对于每个选定的元素,为具有指定名称的属性创建属性补间到指定的目标值.

可以通过调用访问此自动创建的补间transition.attrTween(attrName).

当这个补间被D3调用时,它将返回一个插值器.这又可以访问在创建插补器时关闭的目标值.当进一步阅读文档时,真正的技巧变得明显:

然后,为每个转换帧调用返回的内插器,以便顺序通过缓和时间t,通常在[0,1]范围内.

知道t - 在转换结束时的最终值 - 将为1,您可以使用此值调用先前获得的插值器,该值将产生转换的目标值.

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

以下示例通过打印已在运行的转换的目标值来显示此信息.

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>

对于您将用于transition.styleTween()获取补间的样式转换也是如此.