javascript - 从 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

你可以这样做:

第一步

在你的例子中为所有圈子提供唯一的 id 我将圈子的 id 设置为名称

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

第二步

在selectsubtree函数中，使用我们在step1中设置的id使圆dom填充(黑色)

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

第三步

在 deselectSubtree 函数中，使用我们在步骤 1 中设置的 id 使圆 dom 填充(白色)

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

工作代码here