Question

我使用相同的数据来创建可视化的几个不同部分。我想在选择的一个节点上创建鼠标悬停事件，该节点修改另一个选择中的相应节点。什么是惯用的d3方式呢？（我知道我可以使用id，或者嵌套选择，或者在两个选择范围内的地图中存储信息......但这些对我来说似乎都是混乱的策略）

作为旁注，如果有一个很好的“d3成语”参考，在执行常见任务时可能非常有用。

Answer 1

选择通常是短暂的;如果您可以轻松地从文档中重新选择它们，则无需保留它们。因此，通过id选择是一个合理的选择。

如果您不想为元素提供唯一ID（通常在创建可视化时有时很麻烦），则另一个选项是通过绑定数据存储对关联元素的引用。例如：

selection.each(function(d) { d.element = this; })

现在，假设相同的数据d绑定到另一个元素，您可以d3.select(d.element)选择原始元素。您可以选择比“元素”更具体的名称，以明确您引用的两个（原始和装饰）元素中的哪一个。

另一方面，如果您在不同元素上有不同的数据，那么您需要一种不同的方式将它们链接在一起。如果您不想使用id或其他合适的选择器，那么引用映射也是合理的。