Ho creato un grafico a ciambella d3. Qui è il mio codice:D3: come aggiornare un grafico con nuovi dati?
var width = 480;
var height = 480;
var radius = Math.min(width, height)/2;
var doughnutWidth = 30;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d[1]; });
var dataset = settings.dataset;
console.log(dataset);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data[0]);
})
Ho una forma semplice sulla mia pagina web che viene visualizzato un menu a tendina con diverse opzioni. Ogni volta che un utente modifica un valore nel modulo, viene inviato un nuovo set di dati al mio script (settings.dataset) e la ciambella viene ridisegnata sulla pagina.
Il problema è che alcuni dei valori del set di dati precedente rimangono nel DOM. Nell'output della console di seguito, è possibile vedere che il secondo set di dati ha solo due elementi. Il terzo proviene dal set di dati precedente. Questo sta rovinando il grafico, poiché sta visualizzando un valore che non dovrebbe essere lì.
La mia domanda: come faccio a cancellare i vecchi valori? Ho letto su .exit()
e .remove()
, ma non riesco a capire come funziona.
quindi il codice che hai incollato sopra viene eseguito ogni volta su udate? – Cyril
Sì, lo script viene chiamato ogni volta che un utente sceglie un'opzione diversa nel mio modulo. – 24ma13wg
un problema che posso vedere è d3.select ("body") .append ("svg") che significa che si sta aggiungendo lo svg ogni volta durante l'aggiornamento. fai d3.select ("svg"). remove() per assicurarne la rimozione durante l'aggiornamento. – Cyril