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

Question

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

这样做有好办法吗？我是否需要使用辅助阵列/对象，或者有没有办法将数据应用于元素本身？

Answer 1

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

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

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

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

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

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

D3.select

来自the API doc：

  

d3.select（node）：选择指定的节点。如果您已经有一个节点的引用，例如事件监听器中的d3.select（this），或者诸如document.body之类的全局，那么这很有用。