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 节点绑定(bind)到其对应数据的键。如果不提供这样的功能，D3 就别无选择，只能使用索引将数据绑定(bind)到 DOM 节点。