0

i want to make a react app that allows to filter a sankey-diagram with a slider.

I'm rather new to react, so i'm still a bit overwhelmed.

This is the current state: https://codesandbox.io/s/react-d3-sankey-3gbfjh

The code for the sankey Diagram is based on the example on observable: https://observablehq.com/@d3/sankey

There are several issues at the moment:

  1. The filtered data is only available after the slider is used once
  2. The plot does not change even though the data does

The second part is solved if i add the data to the dependency array in the useEffect hook i use to draw the chart, then the new chart is however drawn on top of the previous one.

I'm glad for any help with this.

sisyphos
  • 33
  • 4

1 Answers1

0

I got it to work now. As i figured above the data should be included in the dependency array. To clear the plot when changing the data i use this code:

  svg.selectAll("*").remove();

My approach appears to be similiar to this actually: https://blog.griddynamics.com/using-d3-js-with-react-js-an-8-step-comprehensive-manual/

sisyphos
  • 33
  • 4