从 SVG 外部的按钮单击 D3 中的节点

更一般地说，如果用户与元素 A 交互，您如何选择（然后修改）相关元素 B？有很多方法可以实现这一点，但这里有三种常见的方法。

选项 1.对于一对一映射，请按 id 选择。

如果 A 中的每个元素在 B 中正好有一个对应的元素，则可以通过 id 选择相关元素 B，例如 d3.select("#foo") 选择一个<div id="foo">。

这种方法需要使用 selection.attr 为 B 中的每个元素设置一个 id。如果您的数据具有固有的唯一标识符，例如 d.name 或 d.id，则这是最简单的：

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

接下来，要启用单击元素 A 以更改 B 中相应元素的填充颜色，请使用 selection.on 注册单击侦听器，然后按 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"的元素，例如<div class="foo">，请说d3.selectAll(".foo")。如果 A 中的任何元素对应于 B 中的多个元素，请使用此方法。例如，如果您有一个显示学生之间关系的力导向图，则可以根据每个学生的年份为节点着色，然后使用图例切换每年的可见性。

与前面的方法一样，您可以使用 selection.attr 来设置"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");
});

请注意，我们在这里使用的是selectAll而不是select;这是因为我们想选择所有相应的元素，而不仅仅是第一个。同样，您需要确保类属性有效。

选项 3.对于其他所有内容，请选择并按数据进行筛选。

前两种方法生成 id 和类，以便浏览器可以索引 B 中的元素以进行有效选择。对于少量元素，或者当需要更通用的选择方法时，您可以省略指定"id"或"class"属性，而只需通过selection.filter手动选择即可。

我们调用与 A da 中每个元素关联的基准面

，以及与 B db 中每个元素关联的基准面。现在我们所要做的就是定义一个表达式，当da匹配时返回 true db .例如，如果我们想按类型过滤：

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

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

当你写：

。并使用普通的JavaScript尝试单击它...

你是什么意思？

如果你的意思是你写了这样的代码：

mySVGElement.click();

那么这就是你的问题。并非所有 DOM 元素都有像 <button> 或<input…>那样click()方法。相反，您需要模拟并触发自己的点击事件：

function simulateClick(elementToClick){
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !elementToClick.dispatchEvent(evt);
  return canceled; //Indicate if `preventDefault` was called during handling
}