我正在使用 D3 强制布局并添加代码以允许用户选择单个节点(此处,select 与 D3 select() 无关,但从用户的角度指示节点的突出显示状态)。一次只能选择一个节点。因此,当用户单击未选择的节点时,我想取消选择任何选定的节点。
我正在节点上使用选定的属性,并努力使用 D3 data(...) 或 datum(...) 方法来设置该属性。事实上,我无法让它像那样工作。我现在所拥有的似乎有点笨拙,所以我希望有一种更干净的方法。
function deselectAll() {
var sc = d3.selectAll("circle")
.filter(function(d) {return (d.selected == "y")});
var circles = sc.data();
sc.transition()
.duration(50)
.style("stroke-width", "1px")
.style("stroke", "#3182bd");
if(null != circles && circles.length > 0) {
for(i=0; i<circles.length; i++) {
circles[i].selected = "n";
}
}
}
问题在于,将 .data("n") 添加到链中不会将“selected”设置为“n”。作为 d3 链的一部分是否可以做到这一点?
最佳答案
d3 中的许多选择(或转换)函数将当前数据从每个节点传递到您定义的函数。您可以随时修改该数据的内容。
使用您的示例,如果您想将 d.selected == "y"
从“y”设置为“n”的节点,您可以使用过滤后的选择,如下所示:
sc.each(function(d) {
d.selected = "n";
});
此函数将为选择中的每个节点调用一次(每个节点根据您的过滤器选择“y”),因此您可以简单地更改数据上的属性值。
关于d3.js - 在 D3 强制布局中使用 data(...) 来更新图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18964226/