Javascript 从svg外部的按钮单击d3中的节点

我已经使用D3创建了一个力定向图，并在一个普通div中显示了节点的id。我需要突出显示其id已在div中单击的节点。 我已经搜索了节点的id，并使用普通javascript尝试单击它，但它不起作用。

当您编写：

…并使用普通javascript尝试单击它

你什么意思

如果您的意思是您编写了如下代码：

mySVGElement.click； 那这就是你的问题。并非所有的DOM元素都有像或可能的click方法。相反，您需要：

功能模拟ICKELEmentToClick{ var evt=document.createEventMouseeEvents； evt.initMouseEventclick，true，true，window， 0，0，0，0，0，false，false，false，false，0，null； var cancelled=！elementToClick.dispatchEventevt； return cancelled；//指示在处理过程中是否调用了'preventDefault' }

---

更一般地说，如果用户与元素A交互，那么如何选择并修改相关元素B？实现这一点的方法有很多，但这里有三种常见的方法

备选案文1。对于一对一映射，请选择“按id”。 如果A中的每个元素在B中正好有一个对应的元素，则可以通过id选择相关的元素B，例如d3.selectfoo来选择A

这种方法需要使用为B中的每个元素设置一个id。如果您的数据具有固有的唯一标识符，如d.name或d.id:

接下来，要启用单击元素A以更改B中相应元素的填充颜色，请使用注册单击侦听器，然后按id选择：

a.on("click", function(d) {
  d3.select("#" + d.id).style("fill", "red");
});

标识符必须是唯一的和唯一的。例如，id必须以字母而不是数字开头，并且不能包含空格。如果您的数据还没有唯一标识符，您可以从索引中生成一个，例如

b.attr("id", function(d, i) { return "b-" + i; });

然后，假设元素A的顺序相同

a.on("click", function(d, i) {
  d3.select("#b-" + i).style("fill", "red");
});

您还可以选择生成唯一标识符

备选案文2。对于一对多映射，请选择“按类”。 要选择类foo的元素，例如，d3.selectAll.foo。如果A中的任何元素对应于B中的多个元素，请使用此方法。例如，如果有一个显示学生之间关系的力定向图，则可以根据每个学生的年份为节点着色，然后使用图例切换每年的可见性

与前面的方法一样，可以使用设置class属性。在这种情况下，class属性不是唯一的，因此它可能来自数据中的d.type属性：

b.attr("class", function(d) { return d.type; })

如果数据的不同分类属性有多个图例，还可以更具体，并在类名前加前缀。要继续学生年示例，请执行以下操作：

b.attr("class", function(d) { return "year-" + d.year; })

设置class属性将替换以前设置的任何类，因此如果要将多个类应用于元素，则需要在设置class属性时使用空格将它们连接在一起

接下来，要启用单击元素A以更改B中相应元素的填充颜色，请使用selection.on注册单击侦听器，然后按类选择：

a.on("click", function(d) {
  d3.selectAll("." + d.type).style("fill", "red");
});

请注意，我们使用的是此处而不是；这是因为我们希望选择所有对应的元素，而不仅仅是第一个元素。同样，您需要确保class属性是正确的

备选案文3。对于其他所有内容，请选择并按数据过滤。 前两种方法生成ID和类，以便浏览器可以索引B中的元素以进行有效选择。对于少量元素，或者当需要更通用的选择方法时，可以省略指定id或类属性，只需手动选择

让我们调用与da中的每个元素关联的数据，以及与db中的每个元素关联的数据。现在我们所要做的就是定义一个表达式，当da与db匹配时返回true。例如，如果我们想按类型筛选：

a.on("click", function(da) {
  b.filter(function(db) { return da.type == db.type; }).style("fill", "red");
});

---

前两个选项是首选选项，但有时手动筛选很有用，例如当您有一个范围滑块并希望基于定量变量进行筛选时。

答案令人印象深刻。竖起大拇指！教程本身！我想知道我们是否应该在这个标签上做一个FAQ，并添加这样的问题…jQuery在堆栈上有这样的内容溢出谢谢@mbostock您的反馈真的很有帮助！！非常感谢你对定制点击事件的回答，让我满足了我的要求。再次非常感谢！我很高兴能帮上忙。请注意，如果这个答案确实解决了您的问题，那么最好接受它，而不是另一个可能非常有用但实际上没有解决您问题的答案。然而，如果@mbostock的回答确实解决了你的问题，那么一定要留下你的“接受”标记；当然，弗罗格，事实上，以上两个答案对我想要实现的目标都很有用。糟糕的是，我们只能有一个被接受的答案。

a.on("click", function(da) {
  b.filter(function(db) { return da.type == db.type; }).style("fill", "red");
});