使用转换扩展D3中的路径 [英] Extending paths in D3 with transition

问题描述

我一直在处理与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的新手，但我已经阅读过渡，似乎不明白为什么这不'

$ b

更新

这里是 someFunctionThatReturnsAPath的定义：

  function（d）{
 var coordinates = []; 
 
 for（var i = d.track.length  -  1; i> = 0; i--）{
 //我们只关心最后10个元素
 if（coordinates.length> = 10）
 break; 
 coordinates.push（d.track [i]）; 
} 
返回路径（{type：LineString，coordinates：coordinates}）; 
}; 
  

和 someFunctionThatReturnsADifferentPath ：

  function（d）{
 var coordinates = []; 
 
 for（var i = d.track.length  -  1; i> = 0; i--）{
 //我们只关心最后20个元素
 if（coordinates.length> = 20）
 break; 
 coordinates.push（d.track [i]）; 
} 
返回路径（{type：LineString，coordinates：coordinates}）; 
}; 
  

其中path定义如下（ projection 是 d3.geo.albersUsa（））：

  var path = d3.geo.path（）
 .projection（projection）; 
  

目标是在第二次调用时，该行会扩展10个较新的数据点。 p>

解决方案

如果您的路径没有相同的点数，转换可能无法正常工作。尝试.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 。网站备份时。

I've been grappling with issues relating to transitions in D3. Consider this code:

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

And I call the following in a setTimeout a few seconds later:

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

The second call correctly updates the paths but doesn't animate the transition. Why is there no transition when the d attribute is updated in the second call?

Note that the paths are very complex. In both calls, there's a noticeable delay before the paths are actually drawn. Perhaps that's related to the lack of transition?

I'm new to D3, but I've read up on transitions and can't seem to understand why this doesn't behave as I expect it.

---

Update

Per @Marjancek's answer, I'm providing more details regarding the two called functions.

Here is the definition of 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});
};

And 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});
};

where path is defined as follows (projection is d3.geo.albersUsa()):

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

The objective is that on the second call, the line is extended with 10 newer data points.

解决方案

If your paths do not have the same number of points, the transitions might not work as expected. Try .attrTween: http://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween There is an example on bl.ocks.org but the site seems to be down at the moment so I can't link to it.

Added on edit: The gist I was thinking of was: https://gist.github.com/mbostock/3916621 the bl.ocks link will be http://bl.ocks.org/mbostock/3916621 when the site is back up.

这篇关于使用转换扩展D3中的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！