D3 Mouseover Interactivity

See above image. I created a collapsible tree and now when I mouse over a circle (or a name) I want to display attributes 1, 2,3 in the upper left corner. On mouseout I want that area to be blank.

Things to be displayed from the org chart are like name, address, city, state, zip, phone, etc.

Can someone help this not very advanced D3.JS developer? Thanks!

Happy to help! Could you please share the VizHub link to your work, so that I may investigate? Thank you.

Thank you so much Curran. I just forked and created my first VizHub entry. Everything is there just need to be shown how to best extract other object info and place it in a fixed position as the mouseover then disappear on the mouseout.

Here is the link: https://vizhub.com/tbell12501/6ea57c199c2342c3ab8172a2a9cf2fdc?edit=files&file=index.html

Got it. This is a question about how to develop the feature with D3, not particular to VizHub. The approach I’d take is roughly like this:

  • The first thing I notice is that you’re putting all the code in a single <script> tag, which could be split up into modules for easy navigation between files.
  • In the same place where you added the click listener, add listeners for mouse enter and mouse exit (around line 727).
  • In those listeners, extract the values and render them in the corner.
  • You can use a fixed overlay element to display the data.