将 javascript 对象关联到 SVG 元素

Question

目标

我想将 d3.js 创建的 SVG 元素与 javascript 对象相关联 - 这样，当 SVG 元素在事件侦听器上可用时，我可以直接从它追溯到 javascript 对象。然而，这在我的情况下似乎并不奏效，如下所述。

（动机）

我有很多 SVG 元素，每个元素在逻辑上都与一个对象相关联，该对象包含与之相关的结构化数据。该数据决定了当任何 SVG 元素触发事件时要执行的操作，并且每个元素都不同

我的尝试

我只是将对象添加为 SVG 元素的新属性。我可以看到它已经添加好了。 然后我使用 d3 的 .on 函数附加事件侦听器。 我获得了我认为是d3.select(this) 触发事件的SVG 元素。实际上，我可以通过这种方式修改它的 SVG 属性，正如您在下面给出的代码笔中将小矩形悬停时看到的那样。

问题

虽然我可以确认我的对象已添加到 SVG 对象中，但当我在事件处理程序中检索 SVG 元素时，它具有除了该对象引用的所有内容。

我将此问题简化为 codepen 中的代码 - 日志记录演示了问题 - 将矩形悬停以检查它。

我做错了什么导致添加的对象引用不可用？ 我应该如何正确地在 SVG 元素中使用对象引用，或者解决这个问题？

问题代码描述：

rectangle = main.append('rect')
                           .style('fill', '#0000FF')   
                           .style('stroke-width', '0px')
                           .style('fill-opacity', '1')
                           .attr('height',30)
                           .attr('width',30)
                           .attr('id', '1')

rectangle.__test__ = 'test'



rectangle.on('mouseover', function(){
  console.dir(d3.select(this))
  /* __test__ is absent.... */
  })

Answer 1

您的示例代码无法按预期工作的原因是因为rectangle 不是 对矩形元素的引用，它是对 d3 选择的引用，它只是碰巧包含单个元素。稍后为同一元素创建不同的选择不会让您访问初始选择的属性。

（想一想：把实际的 SVGRectElement 对象想象成图书馆的书。那本书在你的背包里（rectangle 引用的 d3 选择）。你创建了一些关于这本书的注释（@ 987654327@)，也把它们加到你的背包里。然后你做其他事情，后来有人把同一个图书馆的书拿出来放在不同的背包里。对于很多用途，效果是一样的：一个背包里有一个特定的书。如果您想阅读这本书或将其带到特定的班级，那么它在哪个背包里都没有关系。但是，那个人将无法神奇地找到你的笔记在他们的背包里！）

如果你这样做了

rectangle.node().__test__ = "test";  
//use .node() to extract the first element from the d3 selection
//and then assign a new property value to it

然后

console.dir(this.__test__);
//`this` directly references the rectangle element,  
// which has the test property added above

在事件处理程序中，它会起作用。

但是您可以更轻松地做到这一点，方法是使用 d3 数据函数将数据对象与每个元素相关联，然后将其作为事件处理函数的第一个参数直接访问。 花点时间与the tutorials 交流，了解如何充分利用 d3。