Question

我一直在努力解决与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的新手，但我已经阅读了过渡，似乎无法理解为什么这不符合我的预期。

更新

Per @ 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});
};

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

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

目标是在第二次调用时，该行扩展了10个更新的数据点。

Answer 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。

Answer 2

如果不看你的someFunctionThatReturnsADifferentPath就不可能知道;但我猜你的不同功能没有考虑插值，从它收到的三个参数。

阅读过渡文档：https://github.com/mbostock/d3/wiki/Transitions

通过转换扩展D3中的路径

2 个答案: