使用过渡扩展 D3 中的路径答案

【问题标题】：Extending paths in D3 with transition使用过渡扩展 D3 中的路径
【发布时间】：2013-03-23 14:52:43
【问题描述】：

我一直在努力解决与 D3 中的过渡有关的问题。考虑这段代码：

svg.selectAll("path")
  .data(data, key)
  .enter().append("path")
  .attr("d", someFunctionThatReturnsAPath);
});

几秒钟后，我在setTimeout 中拨打以下电话：

svg.selectAll("path")
  .transition()
  .duration(2000)
  .attr("d", someFunctionThatReturnsADifferentPath);
});

第二次调用正确地更新了路径，但没有为过渡设置动画。为什么在第二次调用中更新d属性时没有过渡？

请注意，路径非常复杂。在这两个调用中，在实际绘制路径之前都有明显的延迟。也许这与缺乏过渡有关？

我是 D3 的新手，但我已经阅读了有关转换的内容，但似乎无法理解为什么它的行为不像我预期的那样。

更新

根据@Marjancek 的回答，我将提供有关这两个被调用函数的更多详细信息。

这里是someFunctionThatReturnsAPath的定义：

function(d) {
  var coordinates = [];

  for (var i = d.track.length - 1; i >= 0; i--) {
    // We only care about the last 10 elements
    if (coordinates.length >= 10)
      break;
    coordinates.push(d.track[i]);
  }
  return path({type: "LineString", coordinates: coordinates});
};

还有someFunctionThatReturnsADifferentPath:

function(d) {
  var coordinates = [];

  for (var i = d.track.length - 1; i >= 0; i--) {
    // We only care about the last 20 elements
    if (coordinates.length >= 20)
      break;
    coordinates.push(d.track[i]);
  }
  return path({type: "LineString", coordinates: coordinates});
};

其中路径定义如下（projection为d3.geo.albersUsa()）：

var path = d3.geo.path()
  .projection(projection);

目标是在第二次调用时，用 10 个更新的数据点延长线。

【问题讨论】：

标签： d3.js transitions

【解决方案1】：

如果您的路径没有相同数量的点，则转换可能无法按预期工作。试试 .attrTween：http://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween bl.ocks.org 上有一个示例，但该站点目前似乎已关闭，因此我无法链接到它。

在编辑时添加：我想到的要点是：https://gist.github.com/mbostock/3916621 当网站备份时，bl.ocks 链接将是 http://bl.ocks.org/mbostock/3916621。

【讨论】：

太好了，感谢您的指点。 GitHub 早先宕机了，这可能就是 bl.ocks.org 宕机的原因。你现在碰巧有链接吗？
我添加了答案的链接

【解决方案2】：

不看你的 someFunctionThatReturnsADifferentPath 是不可能知道的；但我猜你的不同函数没有考虑到它收到的三个参数的插值。

阅读转换文档：https://github.com/mbostock/d3/wiki/Transitions

【讨论】：

我已根据您要求的说明更新了我的问题。我已经阅读了该文档的大部分内容，但我会更彻底地阅读它。