1

我一直在努力解决与 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});
};

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

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

目标是在第二次调用时，这条线用 10 个更新的数据点进行扩展。

4

2 回答 2

6

如果您的路径没有相同数量的点，则转换可能无法按预期工作。尝试 .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向上。

于 2013-03-23T23:23:53.873 回答
0

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

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

于 2013-03-23T16:04:03.343 回答