d3.js - 确保 d3 数据元素与 id 匹配？

Question

我有一个带有一堆多边形的现有 svg。每个多边形都有一个唯一的 id，每个 id 都有一些相关的数据。

我的问题是：如果我做自然 d3 加入：

d3.selectAll("polygon").data(array_of_data)

无论如何要确保与多边形关联的数据元素是正确的？

还是我只需要保持与array_of_data所选多边形的顺序相同的顺序？

Answer 1

D3 的data()函数接受一个可选的第二个参数，旨在提供数据和 DOM 节点之间的这种对应关系。试试这个：

d3.selectAll('polygon').data(array_of_data, function(d) { return d.id; });

的第二个参数data()是一个回调函数，当使用数据调用时，它返回将每个 DOM 节点绑定到其对应数据的键。如果不提供这样的功能，D3 就别无选择，只能使用索引将数据绑定到 DOM 节点。