svg - 将任意数据附加到 D3.js 中的对象

Question

这主要与 D3.js 的“最佳实践”有关。在创建页面后，我想将任意信息附加到页面上的不同 svg 元素。在 D3 中，看起来通常从数据集中生成 svg 元素。我想随时将数据附加到这些 svg 元素，而不添加它们的 HTML 属性。

有没有这样做的好方法？我需要使用辅助数组/对象还是有办法将数据应用于元素本身？

Answer 1

如果要附加任意数据，可以使用datum 方法：

D3.select('#mynodeId').datum( mydata );

然后稍后您可以再次访问该值：

var mydata = D3.select('#mynodeId').datum();

在内部，D3 将使用__data__节点的属性，就像通过selectAll, enter,append序列从数据集创建节点时一样。

请注意，如果您已经拥有对 DOM 节点的引用，则可以将其作为参数传递给，D3.select而不是根据选择器语法对其进行重新查找：

D3.select( anExistingDOMNodeReference ).datum( mydata );

从API 文档：

d3.select(node)：选择指定节点。如果您已经拥有对节点的引用，例如事件侦听器中的 d3.select(this) 或全局（例如 document.body），这将非常有用。