NVD3, Clear svg before loading new chart

Asked 17/3, 2014 at 10:38 Answered 8/5, 2022 at 15:14

I have several different NVD3 charts that I call upon in the same svg. I use buttons to call functions, each containing a new chart that uses its own data.

Is there a way to clear my single svg without deleting it? I wish to press a button to call my chart, but clear the svg before the new chart is loaded.

It's not an issue when using the kind of chart... calling two multibarhorizontal charts, for example, just updates the shapes, which is fine. The problem is loading two different charts, like a line and a bar.

EDIT - The answers must be something like d3.select("svg").remove() but that just deletes the svg. I only want to clear it.

Confute answered 17/3, 2014 at 10:38 Comment(4)

Have you tried d3.selectAll("svg > *").remove()? – Oshiro 17/3, 2014 at 11:18

That's the answer, it works, thanks Lars Kotthoff. – Confute 17/3, 2014 at 11:21

Great, I'll add this as an answer for reference. – Oshiro 17/3, 2014 at 11:29

if "chart.useInteractiveGuideline(true);" was enabled, the old guideline remains even though the plot has been removed, anyone know how to fix? – Acetic 17/2, 2015 at 6:31

126

You can select all the elements below the SVG with the "svg > *" selector, i.e. to remove all of those, do

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

Oshiro answered 17/3, 2014 at 11:30 Comment(2)

how would i remove the relevant tooltip that accompanies the chart? it just seems to append more tooltips every time i draw a new chart – Andrey 3/12, 2015 at 12:10

@FinbarMaginn That entirely depends on how you've implemented the tooltip. I suggest you ask a separate question about this. – Oshiro 3/12, 2015 at 18:20

This works for me:

var svg = d3.select("svg");
svg.selectAll("*").remove();

Placate answered 20/1, 2015 at 13:58 Comment(0)

If you are developing a dashboard having multiple widget showing different d3 charts then use the following

d3.selectAll("#d3-donutChart > *").remove();

this will only clear the specific chart, not all the svg's in the webpage.

Add this line just after subscribing to data in angular 2.

Paramaribo answered 13/11, 2017 at 6:24 Comment(0)

This is all you need.

svg.text('')

Kironde answered 8/5, 2022 at 15:14 Comment(0)

This is the one that worked for me.

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

Honewort answered 21/5, 2020 at 22:22 Comment(0)

after create button put this code

$("svg").remove()

Unseasonable answered 28/10, 2016 at 7:52 Comment(0)

-1

For Re-Drawing the D3 Graphs by clearing the existing sketch and updating.
<body>
...
<input name="reDraw" type="button" value="Re-Draw" onclick="reDraw('data2.csv')" />
...

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

//d3.select('#chart svg')

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   var updateData = function(getData){

    d3.selectAll('svg > g > *').remove();

    d3.csv(getData, function(error, data) {
      if (error) throw error;

      var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

      data.forEach(function(d) {
        d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
      });

      x0.domain(data.map(function(d) { return d.State; }));
      x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
      y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Population");

      var state = svg.selectAll(".state")
          .data(data)
        .enter().append("g")
          .attr("class", "state")
          .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

      state.selectAll("rect")
          .data(function(d) { return d.ages; })
        .enter().append("rect")
          .attr("width", x1.rangeBand())
          .attr("x", function(d) { return x1(d.name); })
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })
          .style("fill", function(d) { return color(d.name); });

      var legend = svg.selectAll(".legend")
          .data(ageNames.slice().reverse())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

      legend.append("rect")
          .attr("x", width - 18)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

      legend.append("text")
          .attr("x", width - 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d) { return d; });

    });

}

updateData('data1.csv');

</script>
</body>

Popinjay answered 24/2, 2016 at 9:23 Comment(4)

Try this above code with data1.csv and data2.csv in your folder. Thanks, – Popinjay 24/2, 2016 at 9:29

The question was answered sufficiently two years ago. This really doesn't add anything. – Confute 24/2, 2016 at 22:44

d3.selectAll('svg > g > *').remove(); – Popinjay 27/2, 2016 at 11:33

This is the actual answer buddy d3.selectAll('svg > g > *').remove(); – Popinjay 27/2, 2016 at 11:34

Recommended topics

Hot tags