web-dev-qa-db-fra.com

NVD3, Effacez svg avant de charger le nouveau graphique

J'ai plusieurs diagrammes NVD3 différents auxquels j'appelle dans le même svg . J'utilise des boutons pour appeler des fonctions, chacune contenant un nouveau diagramme qui utilise ses propres données.

Existe-t-il un moyen d'effacer mon unique svg sans le supprimer? Je souhaite appuyer sur un bouton pour appeler ma carte, mais effacez le svg avant que la nouvelle carte ne soit chargée.

Ce n'est pas un problème lorsque vous utilisez le type de graphique ... appeler deux graphiques multibarhorizontal, par exemple, ne fait que mettre à jour les formes, ce qui est bien .. Le problème est le chargement de deux graphiques différents, comme une ligne et une barre.

Merci d'avance

EDIT- Les réponses doivent être quelque chose comme d3.select("svg").remove() mais cela supprime simplement le svg. Je veux seulement le nettoyer.

d3.jschartsnvd3.js
44
JasTonAChair

Vous pouvez sélectionner tous les éléments situés sous le SVG avec le sélecteur "svg > *", c’est-à-dire pour les supprimer tous,

d3.selectAll("svg > *").remove();
89
Lars Kotthoff

Cela fonctionne pour moi:

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

Si vous développez un tableau de bord comportant plusieurs widgets affichant différents graphiques d3, utilisez les éléments suivants:

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

cela effacera uniquement le graphique spécifique, pas tous les svg de la page Web.

Ajoutez cette ligne juste après vous être abonné aux données angulaires 2.

1
deeksha gupta

après que le bouton de création a mis ce code

$("svg").remove()
0
naresh
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>
0
Karthi