我有一个简单的 d3.js 时间序列图表作为SVG圈子。圆圈是键绑定，因此当我从数组末尾删除数据时，会删除右边的圆圈，当我从数组的开头删除项目时，左侧的圆圈将被删除{{1 }}
exit.remove()现在，我想对SVG路径做同样的事情。 有没有办法将键绑定应用于SVG路径？
答案 0 :(得分：1)
当我想在d3中使用SVG路径制作实时更新图时，我遇到了类似的问题。 d3仅对整个数据序列使用一个路径元素，即对于给定的数组，有一条路径可以根据您的数据变得非常长。这意味着d3不能通过删除像圆圈这样的DOM元素来简单地删除绑定的数据元素。它必须修改<path d="M0,0L1,0L2,1L3,2">到<path d="M1,0L2,1L3,2">之类的内容。不幸的是，我不认为d3具有这种能力（虽然你可以自己编写代码！你需要覆盖d3.interpolateString并编写一些注意掉点的自定义插值器。）
这也意味着你不能使用D3的数据选择器，因为数据适用于具有多个元素的组，例如svg circle。您将不得不使用select("#yoursvgpath").datum(data)来设置单个元素的数据，其中数据是您的数据数组。
因为我知道我的代码运行的硬件很快（桌面i7，ssd等等），所以我每次添加或删除元素时都会重新绘制路径。即便如此，它在Firefox中相当慢（但在Chrome中很好），特别是当点数超过10,000时。要重绘，只需再次调用datum，然后重新应用坐标转换器（类似于select("#yoursvgpath").attr("d", line)，其中line是路径数据转换器）。我最终只重绘了每5,000个数据元素，因此不会不断地重新计算路径。
如果其中任何一个令人困惑，我肯定会读到在d3中制作折线图，它与基于点的图表有很大不同（并且不太直观）。我还要查看https://gist.github.com/mbostock/1642874和http://bost.ocks.org/mike/selection/，了解有关d3选择和折线图的更多信息。