CODEWITHSUNDEEP
javascriptjqueryd3.js
KinsDotNet
KinsDotNet

Reputation: 1560

How can I highlight an entire pathway in a D3 Sankey diagram?

I am building a sankey diagram, like this https://bost.ocks.org/mike/sankey/ however I need to be able to highlight an entire pathway when the user hovers over the node.

Is there anything built into D3 to do that? If not, how could I do this in Javascript?

Upvotes: 1

Views: 391

Answers (1)

rmoestl
rmoestl

Reputation: 3155

In the posted example the hover effect is accomplished through a simple CSS rule for the :hover pseudo class.

When the whole path should be highlighted, this isn't as simple anymore. I see two options.

Apply CSS classes to path elements on demand

  1. For each path element register a mouseenter and mouseleave handler
  2. In the mouseenter handler read out the data element that is bound to it through d3
  3. Calculate the entire path for the read out data element
  4. Change the data array for the entire Sankey to carry data about which edges should be highlighted
  5. Join the changed data array with the Sankey DOM elements and use the update selection to set the hightlight class for elements whose bound elements are marked to be highlighted
  6. Don't forget to handle mouseleave as well

For each path element set individual classes for paths the element is part of

This option more unconventional. The idea is as follows:

  1. When creating the Sankey's DOM elements through the enter selection, set individual classes on an element for each path it is part of
  2. In a mouseenter handler set the currently selected path as a class – let's say hightlight-path-13 if it is path number 13 – on a parent DOM element of the edge elements

  3. In CSS have selectors similar to this

    .highlight-path-13 .path-13 { stroke-opacity: 0.5; }

Upvotes: 1

Related Questions