在D3中扩展路径并转换

我一直在努力解决与D3中的转换有关的问题。考虑以下代码：在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个较新的数据点。

来源

2013-03-23 David Chouinard

如果你的路径不具有相同数量的点，过渡可能不会达到预期效果。尝试.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-23 23:23:53

太好了，谢谢你的指针。 GitHub早些时候倒闭了，这可能是bl.ocks.org崩溃的原因。你现在有没有链接？ – 2013-03-24 00:46:40

我添加了答案的链接 – 2013-03-24 01:37:14

这是不可能知道没有看你的someFunctionThatReturnsADifferentPath;但我猜测你的不同功能没有考虑到它所接收到的三个参数的插值。

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

来源

2013-03-23 16:04:03 Marjancek

我已经更新了我的问题并提供了您请求的说明。我已经阅读了大量文档，但我会更详细地阅读它。 – 2013-03-23 16:17:03

在D3中扩展路径并转换

回答

相关问题