Question

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

（1）更改“所选”节点的颜色
（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);

      }
    });
  });

当“选定”节点发送到 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);

<强> STEP2

在selectsubtree函数中，使用我们在step1中设置的ID，使圆圈dom填充（黑色）

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

<强> STEP3

在deselectSubtree函数中，使用我们在step1中设置的ID，使圆圈dom填充（带白色）

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

工作代码here

在d3.js

1 个答案: