Javascript 如何选择所有节点并将css样式应用于所有节点，D3

我有一个节点数组。我希望单击一个HTML按钮并将所有这些节点的样式更改为该样式

（例如：当我搜索节点或单击以选择时，我希望单击“清除”按钮以重置所有内容）

当然有一个简单的答案，但我似乎无法得到它

.node.selectedNode {
    width:50px;
    height:50px;
    stroke-width: 3px;
    stroke: #f00;
}

.node.unselectedNode {  
}

---

上面是我希望在

之间交替使用的CSS。您可以使用如下代码向节点添加类：

.attr（“class”，“link”）

有关更多上下文，请参见。此特定示例使用

svg.selectAll（）

选择链接类中的所有元素，在您的情况下，这些元素可能有效，也可能无效。如果需要更复杂的选择，请参阅相关文档

---

或者，

.attr

方法支持使用函数根据选定节点的数据执行操作。您可以在

中找到更多信息。假设您的节点是矩形的，您可以使用.on（'click'）来

单击按钮==>将变量设置为更高的范围 ==>调用D3函数以重新加载

var set_variable;
$('#button').on('click', function () {
  if(something) {set_variable="classA";}
  else {set_variable="classB";}

  D3Function();
});

D3Function==>

canvas.selectAll("rect").data(scope.input).enter()
  .append("rect").call(yAxis)

  .attr("class", function(d, i) { return set_variable; })

  .on("click", function(d, i){ 
  //d is the document, i the index
   });

---

要添加或删除CSS类，可以使用选择。功能：

// Select all elements with the node class
d3.selectAll(".node")  
    .classed("selectedNode", true) // Add the selectedNode class to the selection
    .classed("unselectedNode", false); // Remove the unselectedNode class to the selection

选择。功能可用于监听按钮的点击，例如，如果您有如下按钮，则可用于清除按钮功能：

<button id="reset">Clear</button>

---

执行此操作如何选择所有节点并对其应用CSS样式？由于某种原因，在执行此操作时，底部的单击功能无法调用“unselectAllNodes”：我做错了什么吗？我在该变量中放置了一个控制台日志，以检查是否已到达该变量，并且没有任何结果。在

on

函数中使用它之前，您是否声明了

未选中的所有节点

？我唯一声明它的时间与您上面所说的一样：/n这是全局的还是在函数中？如果使用函数声明，而不是函数表达式？i、 e.

函数unselectAllNodes（）{…

<button id="reset">Clear</button>

var unselectAllNodes = function () {
    d3.selectAll(".node")
        .classed("selectedNode", false)
        .classed("unselectedNode", true);
};

// Call the unselectAllNodes function when this button is clicked
d3.select("button#reset")
    .on('click', unselectAllNodes);