Question

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

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

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

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

.node.unselectedNode {  
}

以上是我希望在

之间交替的CSS

Answer 1

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

// 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

选择。 on 功能可用于收听按钮上的点击，例如，如果您有按钮，则可以使用清除按钮功能：

<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);

Answer 2

假设你的节点是直的，你可以使用.on（＆＃39;点击＆＃39;）

点击

按钮==＆gt; set_variable范围更高 ==＆GT;调用D3函数重新渲染

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

  D3Function();
});

D3Function ==＆gt; ...

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
   });

...

$('#reset').on('click', function () {
  set_variable="";     
  D3Function();
});

Answer 3

您可以使用以下代码向节点添加类：.attr("class", "link")。

有关更多背景信息，请参阅the example。此特定示例使用svg.selectAll()选择具有链接类的所有元素，这可能适用于您的情况，也可能不适用。如果您需要更复杂的选择，相关文档为here

作为替代方案，.attr方法支持使用函数根据所选节点的数据执行操作。您可以在the documentation

中找到更多信息

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

3 个答案: