在D3过渡中获取预期的属性值 [英] Getting expected attribute value in D3 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, e.g.

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

D3中是否有像这样的内置功能?否则，我将不得不在d3.transition().attr()方法上编写自己的包装器，以存储传递给它的值.

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.

修改

我发现D3在元素上创建了__transition__字段，该字段似乎包含有关过渡的信息，但是我看不到在那里找到目标属性值的方法.

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.

推荐答案

起初，我认为这是不可能的，因为闭包似乎无法隐藏目标值.不过，只需一点技巧，就可以检索该值.

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.

您必须记住，在调用 ，D3将执行以下操作:

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.

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

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

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

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:

然后为过渡的每个帧调用返回的插值器，以按顺序经过轻松时间 t ，通常在[0，1]范围内.

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

知道t的最终值在转换结束时–将为 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>

对于样式过渡也是如此，在样式过渡中，您将使用transition.styleTween()来获取补间.

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

这篇关于在D3过渡中获取预期的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！