Javascript D3基准与数据之间的差异是什么？_Javascript_D3.js

Javascript D3基准与数据之间的差异是什么？

javascript d3.js

Javascript D3基准与数据之间的差异是什么？,javascript,d3.js,Javascript,D3.js,有人能解释一下D3.js中datum（）和data（）的区别吗？我看到两者都在使用，我不知道为什么你应该选择一个而不是另一个？这里有一些好的链接：关于D3“数据（）”的良好讨论：根据后者： #selection.data（[values[，key]]）将指定的数据数组与当前选定内容联接。这个指定的值是数据值的数组，例如数字或对象，或返回值数组的函数 #选择.基准（[值]）获取或设置每个选定元素的绑定数据。不像 selection.data方法，此方法不计算联接（因此不计

有人能解释一下D3.js中datum（）和data（）的区别吗？我看到两者都在使用，我不知道为什么你应该选择一个而不是另一个？

这里有一些好的链接：

关于D3“数据（）”的良好讨论：

根据后者：

#selection.data（[values[，key]]）

将指定的数据数组与当前选定内容联接。这个指定的值是数据值的数组，例如数字或对象，或返回值数组的函数

#选择.基准（[值]）

获取或设置每个选定元素的绑定数据。不像 selection.data方法，此方法不计算联接（因此不计算输入和退出选择）

我从迈克本人那里找到了正确的答案：

如果要将数据绑定到单个SVG元素，请使用

(...).data([data])

或

如果要将数据绑定到多个SVG元素

(...).data(data).enter().append("svg")

…

仔细研究后，我发现这里的答案并不完整，因为它们只涵盖了使用输入参数调用

selection.data

和

selection.datum

时的情况。即使在这种情况下，如果选择是单个元素，与包含多个元素时，两者的行为也不同。此外，还可以在不使用任何输入参数的情况下调用这两个方法，以便查询选择中的绑定数据/数据，在这种情况下，它们的行为再次不同，并返回不同的内容

编辑-我对这个问题给出了更详细的回答，但下面的帖子几乎抓住了关于这两种方法的所有关键点，以及它们之间的区别

作为输入参数提供

数据

时

```
selection.data（data）
```
将尝试在
```
data
```
数组的元素之间执行数据联接，该选择导致创建
```
enter（）
```
、
```
exit（）
```
和
```
update（）
```
选项，您随后可以对这些选项进行操作。这样做的最终结果是，如果您传入一个数组
```
data=[1,2,3]
```
，则会尝试将每个单独的数据元素（即数据）与选择连接起来。选择的每个元素只有一个绑定到它的
```
数据的基准元素
```


selection.datum（data）
完全绕过数据连接过程。这只是将整个数据作为一个整体分配给选择中的所有元素，而不会像数据联接那样将其拆分。因此，如果您想将整个数组data=[1,2,3]
绑定到选择中的每个DOM元素，那么selection.datum（data）
将实现这一点


警告：许多人认为selection.datum（data）
等同于selection.data（[data]），但只有当
选择
包含单个元素。如果选择包含
多个DOM元素，然后selection.datum（data）将绑定
选择中每个元素的数据的完整性。在里面
相反，selection.data（[data]）
仅绑定整个data
到选择中的第一个元素。这是符合事实的
选择的数据连接行为。数据

不提供数据时
输入参数

selection.data（）
将获取所选内容中每个元素的绑定数据，并将它们组合到返回的数组中。因此，如果您的选择
包含3个DOM元素，其中数据“a”
、“b”
和“c”
分别绑定到每个元素，选择.data（）
返回[“a”、“b”、“c”]
。需要注意的是，如果selection
是一个单独的元素，并且（举例来说）数据“a”
绑定到它，那么selection.data（）
将返回[“a”]
，而不是一些人可能期望的“a”

selection.datum（）
仅适用于单个选择，因为它被定义为返回绑定到选择的第一个元素的基准。因此，在上面的示例中，对于由绑定数据为“a”
、“b”
和“c”
的DOM元素组成的选择，selection.datum（）
将只返回“a”


请注意，即使selection
只有一个元素，selection.datum（）
和selection.data（）
返回不同的值。前者返回选择的绑定数据（“a”
，在上面的示例中），而后者返回数组中的绑定数据（[“a”]
，在上面的示例中）
希望这有助于澄清selection.data
和selection.datum（）
在作为输入参数提供数据和通过不提供任何输入参数来查询绑定数据时的区别
PS-了解其工作原理的最佳方法是从Chrome中的空白HTML文档开始，打开控制台，尝试向文档添加一些元素，然后使用selection.data
和selection.datum
开始绑定数据。有时候，通过做比通过阅读来“摸索”一些东西要容易得多。我认为仓鼠世界给出的解释是迄今为止最好的。
为了扩展它并给出差异的可视化表示，我创建了一个示例文档，该文档至少说明了数据
和数据之间的部分差异
(...).data(data).enter().append("svg")

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)

data.map((n, i) => {
 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node-${n} => data: ${d[i]}`);
});