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

Question

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

Answer 1

更一般地说，如果用户与元素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");
});

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

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

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

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

您还可以iterate over your data array生成唯一标识符。

选项 2。对于一对多映射，按类选择。

选择“foo”类的元素，例如 <div class="foo"> ，比如说d3.selectAll(".foo") 。如果 A 中的任何元素对应于 B 中的多个元素，请使用此方法。例如，如果您有一个显示学生之间关系的力导向图，您可以根据每个学生的年份为节点着色，然后使用图例切换每年的可见性。

与之前的方法一样，您可以使用 selection.attr设置“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 ;这是因为我们想要选择所有相应的元素，而不仅仅是第一个元素。同样，您需要确保类属性为 valid .

选项 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");
});

前两个选项是首选，但有时手动过滤很有用，例如当您有范围 slider 并希望根据定量变量进行过滤时。