1

I have a simple d3.js time-series graph plotted as SVG circles. The circles are key bound so that when I remove data from end of the array, circles from right are removed and when I remove items from the beginning of the array, circles from left are removed on exit.remove().

var circles = svg.selectAll('circle')
    .data(data, function(d){return d.key})

Now, I want to do the same with a SVG path. Is there a way to apply key binding to SVG path?

4

1 回答 1

1

当我想在 d3 中使用 SVG 路径制作实时更新图时，我遇到了类似的问题。d3 对整个数据序列仅使用一个路径元素，即对于给定的数组，绘制的路径可能会变得非常长，具体取决于您的数据。这意味着 d3 不能简单地通过删除像圆这样的 DOM 元素来删除绑定的数据元素。它必须修改类似<path d="M0,0L1,0L2,1L3,2">的东西<path d="M1,0L2,1L3,2">。不幸的是，我不认为 d3 具有这种能力（尽管您可以自己编写代码！您需要覆盖 d3.interpolateString 并编写一些自定义插值器来注意丢失的点。）

这也意味着您不能使用 D3 的数据选择器，因为数据适用于具有多个元素的组，例如 svg 圆。您将不得不使用select("#yoursvgpath").datum(data)它来设置单个元素的数据，其中 data 是您的数据数组。

因为我知道我的代码运行速度很快（桌面 i7、ssd 等），所以我每次添加或删除元素时都会重新绘制路径。即便如此，它在 Firefox 中还是很慢（但在 Chrome 中很好），尤其是当点数超过 10,000 时。要重绘，只需再次调用 datum，然后重新应用坐标变换器（类似于select("#yoursvgpath").attr("d", line)where line 是路径数据变换器）。我最终只重绘每 5,000 个数据元素，这样就不会不断地重新计算路径。

如果其中任何一个令人困惑，我肯定会阅读在 d3 中制作折线图，它与基于点的图表有很大不同（而且不太直观）。我还要看看https://gist.github.com/mbostock/1642874和http://bost.ocks.org/mike/selection/，以了解有关 d3 选择和折线图的更多信息。

于 2013-08-12T14:23:52.373 回答