NVD3, очистить svg перед загрузкой новой диаграммы

У меня есть несколько разных диаграмм NVD3, которые я вызываю в том же svg. Я использую кнопки для вызова функций, каждая из которых содержит новую диаграмму, которая использует свои собственные данные.

Есть ли способ очистить мой единственный svg, не удаляя его? Я хочу нажать кнопку для вызова моей диаграммы, но очистить svg до загрузки новой диаграммы.

Это не проблема при использовании вида диаграммы... вызывая две диаграммы multibarhorizontal, например, просто обновляет фигуры, что хорошо. Проблема заключается в загрузке двух разных графиков, таких как строка и панель.

Заранее спасибо

EDIT. Ответы должны быть чем-то вроде d 3.select("svg").remove(), но это просто удаляет svg. Я только хочу его очистить.

Ответ 1

Вы можете выбрать все элементы под SVG с помощью селектора "svg > *", т.е. удалить все из них, сделать

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

Ответ 2

Это работает для меня:

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

Ответ 3

после создания кнопки введите этот код

$("svg").remove()

Ответ 4

Если вы разрабатываете панель мониторинга с несколькими виджетами, показывающими разные диаграммы d3, используйте следующие

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

это очистит только конкретный график, а не все svg на веб-странице.

Добавьте эту строку сразу после подписки на данные в angular 2.

Ответ 5

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>