8

这是代码：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 中的交互方式，因此我们将不胜感激。

4

2 回答 2

5

我相信您将需要创建一组链式转换来更改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

于 2013-07-25T18:32:37.767 回答
4

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

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

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

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

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

path.data([{'duration':1000}])
    .transition()
    .duration(function(d){return d.duration})
于 2013-07-24T20:33:16.873 回答