Highlight tree path in d3.js

Question

Based on this example:

I have constructed a tree structure visualization in d3.js, which contains further features like zoom in and out, drag and move and highlight node and etc. The features added has no effects on the basic tree code as shown in that example. Now I want to achieve something like Mouseover to highlight the path to the root from the node my mouse is on. I have problem in tracking the path to the root (do not know how to track the path), could someone give a hint or some useful links on how to achieve that?

Answer 1

According to the documentation for d3.tree (https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-_tree) d3 adds a parent attribute to each node. In your mouseover callback, you could traverse up the tree and set a value on each node indicating that it should be highlighted (i.e. d.highlight = true). Then have your update/render code check that value to conditionally apply whatever classes/styles you want.