改变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

我相信您需要创建一组链接转换来更改行stroke-dashoffset中每个点的值.正如@ckersch指出的那样,路径与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阵列来自哪里？是的,这是丑陋的部分.我的几何技能还不足以让你知道如何近似以匹配你的线生成器函数中的"基数"插值,但是在这个例子中,我通过绘制隐藏线并将其读出来修改了一种方法. of svg:

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

Answer 2

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

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

一般来说，当您传递这样的函数时，变量本身并不重要。第一个变量始终分配给__data__选择，第二个变量始终是索引。

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

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

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