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

问题描述

下面是code：
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如何相互作用，所以任何帮助将是AP preciated。

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

推荐答案

关于 D3 一个有趣的事情是，数据不存储在 ð属性，它在 __ __数据属性。路径是特殊的，的这实际上不是在这里对​​路径的数据存储。的虽然可以绕过它，我会强烈建议使用标准 D3 数据模式，与。数据（），。进入（）和 .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().

因为你从来没有真正进入任何数据， __数据__ 是空的，并且，其结果是， D 是未定义如果你使用 .duration（功能（D）{}）。

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

在一般情况下，当你通过这样的函数，变量本身没有关系。第一个变量总是被分配到 __ __数据选择和第二个是永远的索引。

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.

大概是更新模式的最好的例子就是此块由麦克·博斯托克的。还有，如果你遇到问题，以及如何使散点图，所有说的是同一件事大约十十亿教程API中的一些伟大的信息。

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.

您可以使用。数据（）来把一些数据在你的路径，然后用一个函数访问它在 .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屋！