D3路径动画的变化速度

Question

下面是代码：http://jsfiddle.net/fJAwW/

这是我感兴趣的：

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

我有我的数据变量lineData，我用

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

关于过渡部分：

  .transition()
    .duration(2000)

我想做这样的事

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

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

我很难理解d3.js中的数据结构和它们是如何交互的，所以如果能提供任何帮助，我将不胜感激。

Answer 1

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

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

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

更新模式最好的例子可能是Mike的这块。如果你被困在API中，还有一些很好的信息，还有大约100亿篇关于如何制作散点图的教程，这些都是关于同一件事的。

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

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

Answer 2

我相信您需要创建一组链式转换，以便在行的每一点上更改stroke-dashoffset值。正如@ckersch所指出的，path不同于d3中的大多数内容，因为数据被折叠成单个路径字符串，而不是表示为单个值。

您可以像您已经做的那样，从path变量链接初始转换，然后从前面的变量链接进一步的转换。就像这样：

  // Add the path
  var path = svg.append('path')
    .attr( {d: line(lineData), stroke: "steelblue", 'stroke-width': 2, fill: 'none'} );

  var totalLength = path.node().getTotalLength();

  // start with the line totally hidden
  path.attr( {'stroke-dasharray': totalLength + " " + totalLength, 'stroke-dashoffset': totalLength } );

  // transition will be chained from either the original path or the last transition
  var transitionFrom = path;
  // start at 1 since no transition needed to first point
  for (var i = 1; i < lineData.length; i++) {
    transitionFrom = transitionFrom.transition()
      .duration(lineData[i].speed)
      .ease("linear")
      .attr("stroke-dashoffset", lengthAt[i-1] || 0);
  };

这个lengthAt数组从何而来？是的，这就是丑陋的地方。我的几何技能还不够好，不足以直接了解如何近似于行生成器函数中的“基数”插值，但在本例中，我想出了一种方法，绘制隐藏的线条并从svg中读取它：

http://bl.ocks.org/explunit/6082362