D3.js d3中的可重用图表：如何创建和更新选择？_D3.js

D3.js d3中的可重用图表：如何创建和更新选择？

d3.js

D3.js d3中的可重用图表：如何创建和更新选择？,d3.js,D3.js,一些示例（如）包括以下内容： // select the svg element, if it exists var svg = d3.select(this).selectAll("svg").data([data]); // append the svg element, if it doesn't exist svg.enter().append("svg") ... …其中，此是当前DOM元素，数据是绑定到它的数据。据我所知，这个习惯用法允许在第一次调用chart函数时创建一个图表，

一些示例（如）包括以下内容：

// select the svg element, if it exists
var svg = d3.select(this).selectAll("svg").data([data]);

// append the svg element, if it doesn't exist
svg.enter().append("svg") ...

…其中，

此

是当前DOM元素，

数据

是绑定到它的数据。据我所知，这个习惯用法允许在第一次调用chart函数时创建一个图表，但如果您愿意的话，在后续调用之后不能“重新创建”。但是，有人能详细解释一下这个成语吗？例如：

为什么使用

.selectAll（“svg”）

而不使用

.select（“svg”）

为什么不使用
```
.empty（）
```
检查空选择
是否可以将任何单个元素数组传递到
```
.data（）
```
？（我假设此数组的目的只是返回enter选择。）

提前感谢您的帮助。

第一次调用时，没有SVG，因此

.enter（）

选择将包含传递给它的数据。在后续调用中，

.enter（）

选择将为空，因此不会添加任何新内容

关于具体问题：

```
.selectAll（）
```
返回一个数组，然后该数组可以与传递给
```
.data（）
```
的数组相匹配
可以使用
```
.empty（）
```
，但这不是必需的——如果选择为空，则不会发生任何事情。选中
```
.empty（）
```
将添加一个
```
if
```
语句，并具有完全相同的效果
对。查看示例，了解有关选择的更多详细信息

太好了！非常感谢。d3是如此简洁，它真的有助于把事情分解成这样。谢谢你提醒我这篇教程。