delete svg container

[r34ch]

Hey everyone, quick question;

I have a function that redraws my entire SVG graph on a button press (as the button press changes the data used in the D3 code). The problem is it is drawing a second SVG graph (i'm assuming underneath) the old one so the user sees no difference (and it clogs up performance)

How can I delete the old graph?

var vis = d3.select("body")

 .append("svg:svg") 

.attr("width", gv_width)

.attr("height", gv_height)

 .append("svg:g")

.attr("transform", "translate(0, " + gv_height + ")");

Here is my D3 code for making the SVG container and appending a 'master' g container. I understand I can transition between g containers, but I am at a loss how I can do it in this case since the button interaction is in javascript.

If anyone can even help with the first bit I'll be very thankful.

Cheers

[r34ch]

Correction, the SVG container is being drawn below, but below the other SVG (but I still need to delete this first)

[Iain]

You could give your SVG element a unique id. When you wish to redraw, select this id using d3.select() then remove it using selection.remove(), then redraw. The important thing is to not remove the containing element, which would be the HTML body element in your example.

var vis = d3.select("body")
  .append("svg:svg")

  .attr("id", "amazingViz")
  // etc.

d3.select("#amazingViz").remove();

[r34ch]

Thankyou very much Iain, assigning an ID via attr worked flawlessly.

I am now trying to implement a transition to make things look nicer. What happens however is the SVG is instantly drawn below for the duration specified, before the original is removed and the new SVG jumps to take its place.

I'm thinking '.each("end", function()' may be of use, but has anyone any thoughts? 

Btw do SVG containers act like g containers? As in can they transition properly?

[Iain]

Are you transitioning elements in, out, or in and out?

You can use transition.each("end", listener) to stage transitions. Here, listener could be the redraw function, meaning the redraw would execute when the transition completed. However, remember .each() executes per-element -- if your selection is bars in a bar chart, listener will be called for each bar, meaning multiple redraws.

I experimented with outward transitions prior to a .remove(), but decided against them. In this example, pressing the up/down arrow key triggers a remove (no transitions) then a redraw (transitions) of the histogram. The idea is to signal a scale change, as well as a resolution change.

[r34ch]

I would like to transition in and out.

The way I am doing my graph is when a button is clicked a different set of data is used, so the entire d3 code is redrawn. So on button press I would like the original d3 graph to fade out and be removed (using transition.each("end", listener) )

I guess it would make more sense to try and get the graph to fade in all at once to start since currently it has no transition at all. Then on 'd3.select("#SVGID").remove();' have that graph fade out. 

[Iain]

So it seems that you need to add an outward-transition to each element in your visualization; this could fade each element by changing its opacity. The problem, I reckon, is determining when the last transition has completed, so you remove the container and call the redraw function only once. Off the top of my head, I'd suggest keeping a count somewhere and testing for completion.