Dołączanie elementu do istniejącego elementu w d3.js

Question

Próbuję utworzyć BarChart realtime, że działki wartości w czasie, przy użyciu d3.js

To jak ja to robię.

var dataset = [ 5, 10, 15, 20, 25 ]; 
var w = 1800; 
var h = 500; 
var barPadding = 1; 

setInterval(function(){ 
    dataset.push(Math.floor(Math.random()*51)); 
    draw(); 
},1000); 

function draw(){ 

    d3.select("svg").remove(); 
    var svg = d3.select("body") 
      .append("svg") 
     .attr("width", w) 
     .attr("height", h); 

    svg.selectAll("rect").data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", function(d, i){return 12*i;}) 
     .attr("y", function(d){return h -d*4; }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}); 
} 

Problem polega na tym, że przerysowuję cały wykres za każdym razem, gdy do tablicy danych zostanie dodana nowa wartość.

Jak dodać pasek do wykresu słupkowego, który jest już narysowany, za każdym razem, gdy nowa wartość jest dodawana do tablicy, zamiast przerysowywania jej za każdym razem?

Answer 1

Jesteś blisko, przestań przerysowywać element svg. Jeśli potrzebujesz tylko dodawać nowe elementy, to taka funkcja powinna działać, gdy zostanie wywołana.

var dataset = [ 5, 10, 15, 20, 25 ]; 
var w = 1800; 
var h = 300; 
var barPadding = 1; 

var container = d3.select("body").append("svg").attr("width", w).attr("height", h).append("g"); 

setInterval(function(){ 
    dataset.push(Math.floor(Math.random()*51)); 
    draw(); 
},1000); 

function draw(){ 

    container.selectAll("rect").data(dataset).enter().append("rect") 
     .attr("x", function(d, i){return 12*i;}) 
     .attr("y", function(d){return h -d*4; }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}); 
}​ 

http://jsfiddle.net/Wexcode/LYqfU/

Answer 2

Nie wiesz, jakiego rodzaju efektu potrzebujesz, ale spójrz na numer this fiddle.

Poniższy redraw funkcja zachowa dodanie do BarChart więc będzie nadal rosnąć w prawo:

function redraw() { 
    var rect = svg.selectAll("rect") 
     .data(dataset); 

    rect.enter().insert("rect", "line") 
     .attr("x", function(d, i) { return 12*(i+1); }) 
     .attr("y", function(d) { return h -d*4 }) 
     .attr("width", 11) 
     .attr("height", function(d) { return d * 4; }) 
     .attr("fill", "teal") 
     .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";}) 

    rect.transition() 
     .duration(800) 
     .attr("x", function(d, i) { return 12*i; }); 

} 

Pożyczone od an mbostock tutorial.