1

想象一下，我的代码中有以下调用：

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

稍后在代码中，进行完全相同的调用，仅data包含一些新条目。如何在不重绘现有路径的情况下将新数据条目绑定到新路径？（即与现有路径关联的数据元素永远不会改变）

这是一项性能优化：data包含 10,000 多个条目，每次调用添加或删除的条目不到 1%。正如您可能想象的那样，绘制 10,000 多个路径非常耗费资源并且需要几秒钟的时间（在此期间整个页面对用户事件没有响应）。

一种解决方案是构建一个包含旧数据和新数据之间差异的数组，并enter()仅用于新数据元素。但是，data在提供第二个数据集时将旧变量包含在范围内是很棘手的。我认为 D3 必须以某种方式在内部维护旧数据的表示，当然我们可以使用它。

类似地，对于已删除的数据元素必须执行相同的过程（每次调用都会删除一些元素，data并且必须从 DOM 中删除相应的路径，而不涉及所有其他路径）。但是，我想我可以在第一部分给出解决方案的情况下弄清楚这部分。

4

1 回答 1

1

我鼓励您阅读d3 中的对象恒常性和连接。

您引用的enter()函数不仅适用于新数据，您基本上可以通过 using 给出新的数据数组selection.data(newDataArray, function(d){return d.id})，然后，selection.enter()将为您提供所有新元素，selection.exit()所有已删除元素，并selection为您提供新数据集中的所有元素（旧+新）。

这里也是一个不错的简短教程。

您可能还想查看有关 d3.js 中数据的参考文档。

于 2013-03-25T22:36:21.260 回答