Question

这是我感兴趣的：

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数组来自哪里？是的，这是丑陋的部分。我的几何技能还不足以知道如何近似以匹配你的线生成器函数中的“基数”插值，但是在这个例子中，我通过绘制隐藏线并将其读出来修改了一种方法。 svg：

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

Answer 2

关于d3的一个有趣的事情是，数据未存储在d属性中，而是存储在__data__属性中。路径的特殊之处在于这实际上不是存储路径数据的地方。虽然可以规避它，但我强烈建议使用标准d3数据模式，{ {1}}，.data()和.enter()。

由于您实际上从未输入任何数据，因此.append()为空，因此，如果您使用__data__，则d未定义。

通常，当您传递这样的函数时，变量本身并不重要。第一个变量总是分配给.duration(function(d) {})进行选择，第二个变量始终是索引。

更新模式的最佳示例可能是Mike Bostock的this block。如果你遇到困难，那么API中也有一些很棒的信息，以及关于如何制作散点图的大约100亿个教程，所有这些都是关于同样的事情。

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

.duration()

改变D3路径动画的速度

2 个答案: