D3 force graph with React

[Yannis Panagis]

Hi! My name is Yannis and I'm new to the group and have a question :) 

I have a d3 force running inside a useEffect in a ReactJS component. The d3 graph is triggered by a form submit outside the component and the graph is generated from the data passed in as props. When the form is resubmitted once the d3 graph was already generated once, it just adds more nodes/links/labels above the existing nodes/links/labels but I would like it to clear the SVG canvas each time there is a new search. Does anyone have any suggestions about how to approach this? 

[Patricia Warwick]

Have you tried d3.select(“svg”).remove () ?

On Thu, May 20, 2021 at 9:46 AM Yannis Panagis <yannis.pa...@gmail.com> wrote:

Hi! My name is Yannis and I'm new to the group and have a question :) 

I have a d3 force running inside a useEffect in a ReactJS component. The d3 graph is triggered by a form submit outside the component and the graph is generated from the data passed in as props. When the form is resubmitted once the d3 graph was already generated once, it just adds more nodes/links/labels above the existing nodes/links/labels but I would like it to clear the SVG canvas each time there is a new search. Does anyone have any suggestions about how to approach this? 

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/98dd05a3-1afc-4423-8b3f-efb4c0387888n%40googlegroups.com.

--

Patricia
patr...@waremail.ca

I'm charting the federal, provincial and Toronto COVID-19 deaths and cases https://www.waremail.ca/covid-19-charts

[Yannis Panagis]

Hi Patricia, thanks this does remove the full svg! The only issue is that I can't seem to trigger this when the data updates - where would I put this for it to remove the svg before it is added back and populated again?

I can share some code if it helps clarify the question and thank you very much for your help so far already!

[Patricia Warwick]

Yannis

I’m far from an expert in this area. I use a variable which I set to “First” for the first time and then change to something else after the first pass. I’m a bit of a hacker so do you have more than one svg? Send me your code if this doesn’t help. 

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/69a71b6e-ef07-471a-be26-a9abdf467309n%40googlegroups.com.

[Yannis Panagis]

Thank you very much this helped a lot! I was able to remove it inside my useEffect before I initialised the svg.

d3.select(svgRef.current)

    .selectAll("g")

    .remove()

const svg = d3.select(svgRef.current)

    .append("g")

    .attr("id", "root")

By not removing the reference to the svg but the grouping element inside it I could pick it up again and add the grouping element back without issue!

[Nazar Dvozhanovskyi]

Hello, that looks interesting, I need more time to explore it 

On May 20, 2021, at 4:46 PM, Yannis Panagis <yannis.pa...@gmail.com> wrote:

Hi! My name is Yannis and I'm new to the group and have a question :) 

I have a d3 force running inside a useEffect in a ReactJS component. The d3 graph is triggered by a form submit outside the component and the graph is generated from the data passed in as props. When the form is resubmitted once the d3 graph was already generated once, it just adds more nodes/links/labels above the existing nodes/links/labels but I would like it to clear the SVG canvas each time there is a new search. Does anyone have any suggestions about how to approach this?