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

Question

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

Answer 1

更一般地说,如果用户与元素A交互,您如何选择(然后修改)相关元素B？有很多方法可以实现这一目标,但这里有三种常用方法.

选项1.对于一对一映射,请按ID进行选择.

如果在每个元件阿具有恰好一个对应元素乙,可以通过ID选择相关元件B,如d3.select("#foo")选择一个<div id="foo">.

此方法需要使用selection.attr为B中的每个元素设置id .如果您的数据具有固有的唯一标识符,例如或,则这是最简单的:d.named.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"的元素,例如a <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 ; 那是因为我们想要选择所有相应的元素,而不仅仅是第一个元素.同样,您需要确保class属性有效.

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

前两个选项是首选,但偶尔手动过滤很有用,例如当您有一个范围滑块并希望基于定量变量进行过滤时.