D3 基准面与数据之间的区别是什么？

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

D3 - 如何处理 JSON 数据结构？

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

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

或

(...).datum(data)

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

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

.....

在对此进行了一些研究之后，我发现SO上的答案并不完整，因为它们仅涵盖调用并使用输入参数的情况。即使在这种情况下，如果选择是单个元素，则两者的行为与包含多个元素时的行为不同。此外，这两种方法也可以在没有任何输入参数的情况下调用，以便在选择中查询绑定的数据/数据，在这种情况下，它们再次以不同的行为返回不同的东西。selection.dataselection.datumdata

编辑 - 我在这里发布了这个问题的更详细的答案，但下面的帖子几乎抓住了有关这两种方法的所有关键点以及它们之间的差异。

作为输入参数提供时data

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

• selection.datum(data)完全绕过数据联接过程。这只会将整个选定内容作为一个整体分配给所选内容中的所有元素，而不会像数据联接那样将其拆分。因此，如果要将整个数组绑定到 中的每个 DOM 元素，那么将实现此目的。datadata = [1, 2, 3]selectionselection.datum(data)

警告：许多人认为这等同于，但只有当包含单个元素时，这才是正确的。如果包含多个 DOM 元素，则会将整个元素绑定到所选内容中的每个元素。相反，仅将 的整个绑定到 中的第一个元素。这与 的数据联接行为一致。selection.datum(data)selection.data([data])selectionselectionselection.datum(data)dataselection.data([data])dataselectionselection.data

不提供数据输入参数时

• selection.data()将取选取中每个元素的绑定基准，并将它们组合成返回的数组。因此，如果您包含 3 个 DOM 元素，则数据 ，并分别绑定到每个元素，则返回 。重要的是要注意，如果是单个元素，并且（作为示例）基准面绑定到它，那么将返回并且不像某些人预期的那样。selection"a""b""c"selection.data()["a", "b", "c"]selection"a"selection.data()["a"]"a"

• selection.datum()仅对单个选取有意义，因为它被定义为返回绑定到选取的第一个元素的基准。因此，在上面的示例中，选择由绑定基准为 、 和 的 DOM 元素组成的选择将简单地返回 。"a""b""c"selection.datum()"a"

请注意，即使具有单个元素，也要返回不同的值。前者返回选取的绑定基准（在上面的示例中），而后者返回数组中的绑定基准（在上面的示例中）。selectionselection.datum()selection.data()"a"["a"]

希望这有助于澄清在将数据作为输入参数提供数据时，以及在通过不提供任何输入参数来查询绑定基准时，彼此之间的差异。selection.dataselection.datum()

PS - 了解其工作原理的最佳方法是从Chrome中的空白HTML文档开始，然后打开控制台并尝试向文档添加一些元素，然后开始使用和绑定数据。有时，通过做某事比通过阅读来“摸索”要容易得多。selection.dataselection.datum