在D3强制布局中使用数据（...）来更新图形

Question

我正在使用D3强制布局并添加代码以允许用户选择单个节点（此处，选择与D3 select（）无关，但指示从用户的角度来看节点的突出状态）。一次只能选择一个节点。所以，当用户点击未选择的节点时，我想取消选择任何选定的节点。

我在节点上使用了一个选定的属性，并努力使用D3数据（...）或数据（...）方法来设置该属性。事实上，我无法像那样工作。我现在所拥有的东西似乎有点不合时宜，所以我希望有一种更清洁的方式。

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链的一部分？

Answer 1

d3中的许多选择（或转换）函数将每个节点的当前数据传递给您定义的函数。您可以随时修改此数据的内容。

使用你的例子，如果你想设置有从“Y” d.selected == "y"节点为“n”您可以使用您筛选的选择是这样的：

sc.each(function(d) { 
    d.selected = "n"; 
}); 

此功能将一次为每个被调用节点（每个节点具有根据您的过滤器选择的“y”），以便您可以简单地更改基准面上的属性值。