Performance 仅绑定新数据点以优化性能

假设我的代码中有以下调用：

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

稍后在代码中，会进行完全相同的调用，只有

data

包含一些新条目。如何将新数据项绑定到新路径而不重新绘制现有路径？（即，与现有路径关联的数据元素永远不会更改）

这是一种性能优化：

数据

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

一种解决方案是构建旧数据和新数据之间差异的数组，并仅在新数据元素上使用

enter（）

。但是，在提供第二个数据集时，将旧的

数据
变量置于作用域中是很棘手的。我假设D3必须以某种方式在内部维护旧数据的表示，当然我们可以使用它

同样，对于删除的数据元素也必须执行相同的过程（每次调用都会从
数据中删除一些元素，并且必须从DOM中删除相应的路径，而不涉及所有其他路径）。然而，我想我可以在第一部分给出一个解决方案的情况下找出这一部分。
我鼓励您阅读d3中的和

您引用的
enter（）
函数不仅仅用于新数据，您基本上可以使用
selection.data（newDataArray，function（d）{return d.id}）
，然后，
selection.enter（）
将为您提供所有new元素，
selection.exit（）
alldeleted元素和
selection
将为您提供新数据集中的所有元素（旧+新）

这也是一个很好的简短教程

您可能还想看看d3.js中的about数据。
我鼓励您阅读d3中的about和

您引用的
enter（）
函数不仅仅用于新数据，您基本上可以使用
selection.data（newDataArray，function（d）{return d.id}）
，然后，
selection.enter（）
将为您提供所有new元素，
selection.exit（）
alldeleted元素和
selection
将为您提供新数据集中的所有元素（旧+新）

这也是一个很好的简短教程

您可能还想看看d3.js中的about数据。
是否使用enter/transition/exit join structure（）重新绘制了所有现有路径？等等。。。在上面包含的代码片段中，您实际上只是在绘制新元素，即
enter（）
返回的元素。这里唯一与任何旧元素相关的d3操作是
data（）
操作，它确定哪些元素是新的（即输入的）以及哪些元素是更新的。听起来它已经在做你想做的事了。否？是否使用enter/transition/exit连接结构（）重新绘制所有现有路径？请稍候。。。在上面包含的代码片段中，您实际上只是在绘制新元素，即
enter（）
返回的元素。这里唯一与任何旧元素相关的d3操作是
data（）
操作，它确定哪些元素是新的（即输入的）以及哪些元素是更新的。听起来它已经在做你想做的事了。没有？啊，明白了。所以这非常简单！谢谢。啊，明白了。所以这非常简单！谢谢