Select d3.js 中树中节点的子节点

Question

我正在使用以下代码 here 通过树的方式显示数据（以 JSON 格式），它工作正常。目标是每当用户双击一个节点时，就会发生以下事情：

(1)改变'selected'节点的颜色
(2) 改变其所有子树（子树）的颜色

第一个目标 (1) 工作正常。为此，我使用了以下代码片段：

var node = svg.selectAll("g.node")
  .data(nodes, function(d) { return d.id || (d.id = ++i); }, function(d) { return d.isSelected || (d.isSelected = false); });

每个节点都有一个 isSelected 属性，这是一种标志。由于下一个代码片段，节点的颜色发生了变化：

var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
  .on("click", click)
  .each(function(d)
  {
    var sel = d3.select(this);
    //var state = false;
    sel.on("dblclick", function(e)
    {
        //window.alert("state is: " + state);
        //state = !state;

      if (!e.isSelected) {
        e.isSelected = true;
        d3.select(this).select("circle").style("fill", "black");
        //Select all nodes


        selectSubtree(e);

      } else {
        e.isSelected = false;
        d3.select(this).select("circle").style("fill", "#fff");

        //deselect all nodes


        deselectSubtree(e);

      }
    });
  });

将'selected'节点发送到selectSubtree(d)函数时出现问题。我不知道如何准确地改变节点的颜色。有人可以帮助我吗？

function selectSubtree(node){

if(node.children){

node.children.forEach(function(d)
{
    //Select all children
  d.isSelected = true;

        selectSubtree(d);
});}}

我的第一次尝试是使用 d3.select("#id").select("circle").style("fill", " #fff"); ，因为每个节点都有一个 id，但它没有正常工作。

Answer 1

你可以这样做：

第 1 步

为你的所有圈子提供唯一 ID 我将圈子的 ID 设置为名称

nodeEnter.append("circle")
  .attr("id", function(d){return d.name})//give ids to circle
      .attr("r", 1e-6);

第 2 步

在selectsubtree函数中使用我们在step1

中设置的id使圆圈dom填充（黑色）

function selectSubtree(node)
{
    d3.select("#" + node.name).style("fill", "black");
     //your code of recursively calling  function if it has children.

第 3 步

在deselectSubtree函数中使用我们在step1

中设置的id使圆dom填充（白色）

function deselectSubtree(node)
{
    d3.select("#" + node.name).style("fill", "white");

工作代码here

Select d3.js 中树中节点的子节点

Select the children of a node from a tree in d3.js

javascript

tree

d3.js