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会执行以下操作：

对于每个选定的元素，为具有指定目标值的指定名称的属性创建attribute tween。

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

当D3调用此补间时，它将返回interpolator。这又可以访问在创建插补器时关闭的目标值。当进一步阅读文档时，真正的技巧变得显而易见：

然后为转换的每个帧调用返回的插值器，按顺序传递缓动时间 t ，通常在[0,1]范围内。

知道转换结束时t - 的最终值 - 1 ，您可以使用此值调用先前获得的插值器，该值将产生转换的目标值。 / p>

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()来获取补间的样式转换也是如此。

Answer 2

今天遇到了这个问题，发现 altocumulus' answer 很有帮助。但是，我发现（至少对于当前的 d3-transition@2.0.0）如果当前值已经处于目标值，.call 将 attrTween 返回 { {1}} 而不是内插器。

我的解决方案看起来像这样：

null

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

2 个答案: