Skip to content
Advertisement

How Can I highlight the parents names and the connection lines when I hover on their child in family tree

I’m creating family tree using d3.js and i want to do 2 things

  1. how can i highlight the parents names and the connection lines when I hover on their child like this image when i hover on axelenter image description here
  2. how can i determine the last child in each branch so i can give it unique style or add icon after it eg: tree leaf like this image enter image description here

Here is a snippet of my code:

JavaScript
JavaScript

Advertisement

Answer

To highlight the ancestor paths, you need to add id attributes to the connections:

JavaScript

And the names:

JavaScript

Then in the mouseover and mouseout events call functions to highlight and un-highlight the paths. You need the ids to refer to in the highlightPath function:

JavaScript

To identify if a node is a leaf node, test the presence of .children. I adapted your code to colour parents red and children blue. You can use this test and add icons and styling per your requirements.

JavaScript

Your code adapted:

JavaScript
JavaScript
JavaScript
Advertisement