How can I change style class & content of text for ancestors in this d3.js tree?

Question

This is a follow-up to this question . (Thanks Cyril for all your help!!)

My problem turned out to be a little bit tricker and I still need some help. When the user clicks on a text element of any node, I would like the following to happen:

• For each tree-ancestor of that element:
  • Append "X" to that text element
  • Remove the style class "class1" from that element
  • Add the style class "class2" from that element
  • Disable the onclick method from that element
• During these steps other nodes should remain completely untouched.

I have added the parent item to the Object representing the data in collapse() as Cyril recommended. So I can traverse up the path to root. However as I traverse this path, I cannot get a hold of the d3.js element for the text. How can I do that? Once I do that, the above operations will be relatively simple for me to do.

Below is an illustrated example of what I want. When the user clicks Visualizations , viz and flare should become vizX and flareX . Their style classes should be switched from class1 to class2 . And clicking on the vizX and flareX texts should have no effect. And no other nodes should be updated in any way.

How can I do it? I need to be able to grab the d3.js drawing elements as I traverse through the tree.

Answer 1

When you traverse up from the node clicked, to the parent root.

You can also get the DOM element (group which has the circle and text) for the data like shown in the function below.

function findNode(text){
  var DOM = d3.selectAll(".node")[0].find(function(node){
    return (d3.select(node).data()[0].name == text);
  })
  return DOM;
}

So now when ever you have the data and you want to find the group it associates to.

You can make use of the above function and call.

  var k = findNode("physics");//this will return the DOM which has the node physics.

Hope this helps!