D3路径动画的变化速度 [英] Changing speed of D3 path animation

问题描述

代码如下:http://jsfiddle.net/fJAwW/

这就是我感兴趣的:

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

我有我的数据变量 lineData，我将其添加到路径中

I have my data variable lineData, which I add to the path with

.attr("d", line(lineData))

对于过渡部分:

  .transition()
    .duration(2000)

我想做类似的事情

  .transition()
    .duration(function(d) {
      return d.x;
    })

其中 d 是我的数据点之一.

Where d is one of my data points.

我无法理解数据结构以及它们在 d3.js 中的交互方式，因此我们将不胜感激.

I am having trouble understanding the data structures and how they interact in d3.js, so any help would be appreciated.

推荐答案

d3 的一个有趣的事情是数据不存储在 d 属性中，它在__data__ 属性.路径的特殊之处在于这实际上并不是存储路径数据的地方.虽然可以绕过它，但我强烈建议使用标准的 d3 数据模式，带有 .data()、.enter() 和 .append().

One interesting thing about d3 is that data isn't stored in the d attribute, it's in the __data__ attribute. Paths are special in that this isn't actually where the data about the path is stored. While it's possible to circumvent it, I would highly recommend using the standard d3 data pattern, with .data(), .enter(), and .append().

因为您实际上从未输入任何数据，所以 __data__ 为空，因此，如果您使用 .duration(function(d) {}).

Because you never actually enter any data, __data__ is empty, and, as a result, d is undefined if you use .duration(function(d) {}).

通常，当您传递这样的函数时，变量本身并不重要.第一个变量总是分配给 __data__ 用于选择，第二个变量总是索引.

In general, when you pass a function like that, the variable itself doesn't matter. The first variable is always assigned to __data__ for the selection and the second is always the index.

更新模式的最佳示例可能是 Mike Bostock 的此块.如果您遇到困难，API 中还有一些很棒的信息，以及大约 100 亿篇关于如何制作散点图的教程，这些教程都讲述了同样的事情.

Probably the best example of the update pattern is this block by Mike Bostock. There's also some great info in the API if you get stuck, as well as about ten billion tutorials on how to make a scatter plot that all say about the same thing.

您可以使用 .data() 将一些数据放入路径中，然后使用 .duration() 中的函数访问它，如下所示:

You can use .data() to put some data in your path, and then access it with a function in .duration(), like so:

path.data([{'duration':1000}])
    .transition()
    .duration(function(d){return d.duration})

这篇关于D3路径动画的变化速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！