D3.js 检查节点的父节点和子节点

我正在使用d3.js开发angular应用程序。我的代码如下：

const treeData={
“id”：1，
“名称”：“根”，
“checked”：false，
“颜色”：“白色”，
“儿童”：[
{
“id”：2，
“名称”：“叶A”，
“checked”：false，
“颜色”：“红色”，
“儿童”：[
{
“id”：3，
“名称”：“A-1”，
“checked”：false，
“颜色”：“棕色”，
}, 
{
“id”：4，
“名称”：“A-2”，
“checked”：false，
“颜色”：“橙色”，
},
{
“id”：5，
“名称”：“A-3”，
“checked”：false，
“颜色”：“黄色”，
},
]
}, 
{
“id”：6，
“名称”：“叶B”，
“checked”：false，
“颜色”：“绿色”，
“儿童”：[
{
“id”：7，
“名称”：“B-1”，
“checked”：false，
“颜色”：“#00ff40”，
}, 
{
“id”：8，
“名称”：“B-2”，
“checked”：false，
“颜色”：“#00ff80”，
}
]
}
]  
};
常量边距={
前20名，
右:120,，
底数：20，
左：120
};
常量宽度=600-margin.right-margin.left；
常数高度=400-margin.top-margin.bottom；
变量i=0，持续时间=750；
const tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
const diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
const container=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
const root=treeData；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃
根。子。forEach（塌陷）；
更新（根）；
//折叠节点及其所有子节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
函数展开（d）{
如果（d.(儿童){
d、 孩子们
d、 _children=null
}
}
函数更新（源）{
//计算新的树布局。
const nodes=tree.nodes（root.reverse（）；
常量链接=树链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*200；
});
//更新节点…
const node=container.selectAll（“g.node”）
.数据（节点，d=>d.id）；
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）
.附加（“g”）
.attr（“类”、“节点”）
.attr（“transform”，d=>`translate（${source.y0}，${source.x0}）`）
.on（“单击”，onclick节点）；
nodeEnter.append（“圆”）
.attr（“r”，10）
.样式（“填充”，d=>d.颜色）；
nodeEnter.append（“文本”）
.attr（“x”，20）
.attr（“dy”，4）
.attr（“文本锚定”、“开始”）
.text（d=>d.name）；
追加（'foreignObject'）
.attr（'width'，'20'）
.attr（'height'，'20'）
.attr（“x”，-30）
.attr（“y”，-8）
.append（'xhtml:input'）
.attr（'type'，'checkbox'）
.attr（“id”，d=>`checkbox-${d.id}`）
.on（“单击”，单击复选框）
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
// ???
节点更新。选择（“圆圈”）
.风格（“笔划”，“黑色”）；
节点更新。每个（功能（d）{
const cb=d3.select（this）.select（'[type=“checkbox”]'）.node（）；
cb.checked=d.checked；
cb.disabled=isParentChecked（d）；
});
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
const nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，0）；
nodeExit.select（“文本”）
.style（“填充不透明度”，0）；
//更新链接…
var link=container.selectAll（“path.link”）
.data（links，d=>d.target.id）；
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“笔划宽度”，1）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});
})
.attr（“不透明度”，“0.3”）
.风格（“笔划”，“黑色”）；
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
变量o={
x:source.x，
y:来源，y
};
返回对角线({
资料来源：o，
目标：o
});
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
函数findParent（基准）{
如果（基准深度<2）{
返回datum.name
}否则{
返回findParent（datum.parent）
}
}
函数FindParentLink（基准）{
如果（基准面目标深度<2）{
返回datum.target.name
}否则{
返回findParent（datum.target.parent）
}
}
const checkNode=（d，checked，byParent）=>{
d、 已检查=已检查；
const children=d.children | | d.| u children；
if（儿童）
forEach（child=>checkNode（child，checked，true））；
如果（！byParent&&checked&&d.parent）{
const sides=d.parent.children | | d.parent._children；
兄弟姐妹。forEach（兄弟姐妹=>{
if（同级id！==d.id）{
console.log（'UNCHECK:'，同级）
checkNode（同级、false、true）；
}
});
}  
}
函数isParentChecked（d）{
如果（！d.parent）{
返回false；
}
如果（d.父项已选中）{
返回true；
}
回来
const treeData = {
  "id": 1,
  "name": "Root",
  "checked": false,
  "color": "white",
  "children": [
    {
      "id": 2,
      "name": "Leaf A",
      "checked": false,
      "color": "red",
        "children": [
        {
          "id": 3,
          "name": "A - 1",
          "checked": false,
          "color": "brown",
          }, 
        {
          "id": 4,
          "name": "A - 2",
          "checked": false,
          "color": "orange",
          },
        {
          "id": 5,
          "name": "A - 3",
                "checked": false,
          "color": "yellow",
          },
      ]
    }, 
    {
      "id": 6,
        "name": "Leaf B",
      "checked": false,
      "color": "green",
        "children": [
        {
          "id": 7,
          "name": "B - 1",
          "checked": false,
          "color": "#00ff40",
          }, 
        {
          "id": 8,
          "name": "B - 2",
          "checked": false,
          "color": "#00ff80",
          }
      ]
    }
  ]  
};

const margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  };
  
const width = 600 - margin.right - margin.left;
const height = 400 - margin.top - margin.bottom;

var i = 0,duration = 750;
  
const tree = d3.layout.tree()
  .size([height, width]);

const diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });


const svg = d3.select("body").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom);
  
const container = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const root = treeData;
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if (d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function expand(d) {
  if (d._children) {
    d.children = d._children
    d._children = null
  }
}

function update(source) {
  // Compute the new tree layout.
  const nodes = tree.nodes(root).reverse();
  const links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
    d.y = d.depth * 200;
  });

  // Update the nodes…
  const node = container.selectAll("g.node")
    .data(nodes, d => d.id);

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", d => `translate(${source.y0},${source.x0})`)
    .on("click", onClickNode);

  nodeEnter.append("circle")
    .attr("r", 10)
    .style("fill", d => d.color);

  nodeEnter.append("text")
    .attr("x", 20)
    .attr("dy", 4)
    .attr("text-anchor", "start")
    .text(d => d.name);
    
  nodeEnter.append('foreignObject')
    .attr('width', '20')
    .attr('height', '20')
    .attr("x", -30)
    .attr("y", -8)
    .append('xhtml:input')
    .attr('type', 'checkbox')
    .attr("id", d => `checkbox-${d.id}`)
    .on("click", onClickCheckbox)

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  // ???
  nodeUpdate.select("circle")
    .style("stroke", 'black');
  nodeUpdate.each(function(d) {
    const cb = d3.select(this).select('[type="checkbox"]').node();
    cb.checked = d.checked;
    cb.disabled = isParentChecked(d);
  });
    
  nodeUpdate.select("text")
    .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  const nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  nodeExit.select("circle")
    .attr("r", 0);

  nodeExit.select("text")
    .style("fill-opacity", 0);

  // Update the links…
  var link = container.selectAll("path.link")
    .data(links, d => d.target.id);

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("stroke-width", 1)
    .attr("d", function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .attr("opacity", "0.3")
    .style("stroke", 'black');

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {
        x: source.x,
        y: source.y
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

function findParent(datum) {
  if (datum.depth < 2) {
    return datum.name
  } else {
    return findParent(datum.parent)
  }
}

function findParentLinks(datum) {
  if (datum.target.depth < 2) {
    return datum.target.name
  } else {
    return findParent(datum.target.parent)
  }
}

const checkNode = (d, checked, byParent) => {
  d.checked = checked;
  const children = d.children || d._children;
  if (children)
    children.forEach(child => checkNode(child, checked, true));
    
  if (!byParent && checked && d.parent) {
    const siblings = d.parent.children || d.parent._children;
    
    siblings.forEach(sibling => {
      if (sibling.id !== d.id) {
        console.log('UNCHECK: ', sibling)
        checkNode(sibling, false, true);
      }
    });
    
  }  
  
}

function isParentChecked (d) {
  if (!d.parent) {
    return false;
  }
  if (d.parent.checked) {
    return true;
  }
  return isParentChecked(d.parent);
}

function onClickCheckbox(d) {
  d3.event.stopPropagation();
  checkNode(d, d3.event.target.checked, false);
  console.log('ROOT: ', root);
  update(root);   
}


// Toggle children on click.
function onClickNode(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } 
  else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

const findNode = (parent, id) => {
  if (parent.id === id)
    return [parent];
    
  const children = parent.children || parent._children;
  if (children) {
        for (let child of children) {
        const found = findNode(child, id);
        if (found)
          return [...found, parent];
      }
  }
  return null;
}

const selectNode = id => {
   const node = findNode(treeData, id);
   if (node) {
      for (let index = node.length - 1; index >= 0; index--) {
        expand(node[index]);
      }
      checkNode(node[0], true, false);
      update(root);
   }
};

setTimeout(() => selectNode(2), 2000);
setTimeout(() => selectNode(6), 4000);