如何从这个d3.js layout.tree获得树的祖先和树的后代列表？ [英] How can I get a list of tree-ancestors and tree-descendants from this d3.js layout.tree?

问题描述

我正在尝试并修改

解决方案

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

  function collapse（d）{
 if（d.children）{
 d.children.forEach（function（child）{
 child.parent = d; //现在每个节点有一个父节点除了根节点。
}）; 
 d._children = d.children; 
 d._children.forEach（collapse）; 
 d.children = null; 
} 
} 
  

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

  function setColor ，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）; //将所有节点设置为黑色。 
 d1 = d; 
 //遍历所有的父对象，并使其为红色
 while（d1）{
 d1.color =red; 
 d1 = d1.parent; 
} 
 //将子节点的颜色设置为红色。 
 setColor（d，red）
 update（root）; //调用更新，以使节点文本颜色相应地着色。 
} 
  

工作代码此处

I'm experimenting with and modifying this example of d3.js to draw a tree based on a JSON tree structure. This is what part of the tree looks like to start out with:

I'm trying to make 2 separate modifications, but I don't know how to do them:

1. When the text of a node is clicked, I want to get a collection of the text elements of all the tree-descendants. I want to do this so that I can toggle their style classes between my-old-class and my-new-class.
2. When the text of a node is clicked, I want to get a collection of the text elements of all the tree-ancestors. I want to do this so that I can toggle their style classes between my-old-class and my-new-class.

How can I do it?

I don't know at all how to do #1 at all other than I need to add an on-click function to the nodeEnter.append("text") statement. But what should that function do?

For #2, I know this is the relevant part of the code I need to modify. Something like this:

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"));
  });

But I'm not sure what to put in place of those two expressions such that I properly loop through the text elements only of the tree's ancestors (not the DOM ancestors!!)

EDIT:

As an example, in the screenshot below, when the user clicks on the text "data", I want its ancestors text ("vis" and "flare") and its descendants text (every word that appears to the right of "data" to become red)

解决方案

Each node should have a parent like this:

  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;
    }
  }

Next a function to set the color. This function will iterate through the given node and set its children to have a color field.

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)});
  }
}

On text click call this function:

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.
}

working code here

这篇关于如何从这个d3.js layout.tree获得树的祖先和树的后代列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！