如何从此 d3.js layout.tree 中获取树祖先和树后代的列表？答案

【问题标题】：How can I get a list of tree-ancestors and tree-descendants from this d3.js layout.tree?如何从此 d3.js layout.tree 中获取树祖先和树后代的列表？
【发布时间】：2016-09-14 13:04:29
【问题描述】：

我正在试验和修改 d3.js 的 this 示例以基于 JSON 树结构绘制树。这是树的开始部分的样子：

我正在尝试进行 2 个单独的修改，但我不知道如何进行：

单击节点的文本时，我想获取所有树后代的文本元素的集合。我想这样做，以便可以在 my-old-class 和 my-new-class 之间切换他们的样式类。
单击节点的文本时，我想获取所有树祖先的文本元素的集合。我想这样做，以便可以在 my-old-class 和 my-new-class 之间切换他们的样式类。

我该怎么做？

除了需要在nodeEnter.append("text") 语句中添加点击功能外，我根本不知道如何做#1。但是那个函数应该做什么呢？

对于#2，我知道这是我需要修改的代码的相关部分。像这样的：

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-6)
  .on("click", function(d) {
        for (var currentAncestor = this.parentNode; /* WHAT EXPRESSION GOES HERE?? */; currentAncestor = currentAncestor.parentNode) {
            var ancestorText = /* WHAT EXPRESSION GOES HERE?? */;
            ancestorText.classed("my-new-class", !ancestorText.classed("my-new-class"));
            ancestorText.classed("my-old-class", !ancestorText.classed("my-old-class"));
  });

但我不确定用什么来代替这两个表达式，这样我才能正确地循环遍历树的祖先（而不是 DOM 祖先！！）的文本元素only

编辑：

例如，在下面的屏幕截图中，当用户单击文本“数据”时，我想要其祖先文本（“vis”和“flare”）及其后代文本（出现在“数据”变为红色）

【问题讨论】：

不清楚把你想要的截图..
对不起西里尔。添加了屏幕截图和更多解释。谢谢。

标签： javascript angularjs d3.js tree

【解决方案1】：

每个节点都应该有这样的父节点：

  function collapse(d) {
    if (d.children) {
      d.children.forEach(function(child){
        child.parent = d;//so now each node will have a parent except root node.
      });      
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

接下来是设置颜色的函数。此函数将遍历给定节点并将其子节点设置为具有颜色字段。

function setColor(d, color) {
  d.color= color;
  if (d.children) {
    d.children.forEach(function(d){setColor(d,color)});
  } else if(d._children){
    d._children.forEach(function(d){setColor(d,color)});
  }
}

点击文本时调用此函数：

function textClick(d) {
  setColor(root, "black");//set all the nodes to have black.
  d1 = d;
  //iterate over all its parent and make it red
  while(d1){
    d1.color = "red";
    d1 = d1.parent;
  }
  //set color of the children node to red.
  setColor(d, "red")
  update(root);//call update so that the node text color is colored accordingly.
}

工作代码here

【讨论】：