Gắn thêm phần tử vào phần tử hiện có trong d3.js

Question

Tôi đang cố gắng tạo thanh sơ đồ thời gian thực vẽ các giá trị theo thời gian, sử dụng d3.js

Đây là cách tôi đang thực hiện.

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) + ")";}); 
} 

Vấn đề là tôi vẽ lại toàn bộ biểu đồ mỗi khi giá trị mới được thêm vào mảng dữ liệu.

Làm cách nào để thêm thanh vào biểu đồ thanh đã được vẽ, mỗi khi một giá trị mới được thêm vào mảng, thay vì vẽ lại nó mỗi lần?

Answer 1

Bạn sắp đóng, chỉ cần dừng vẽ lại phần tử svg. Nếu bạn chỉ cần thêm các phần tử mới, thì đó là những gì mà chức năng vẽ của bạn sẽ làm khi được gọi.

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

Không chắc chắn bạn đang tìm loại hiệu ứng nào, nhưng hãy xem this fiddle.

Chức năng sau redraw sẽ tiếp tục bổ sung vào barchart vì vậy nó sẽ tiếp tục phát triển về phía bên phải:

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; }); 

} 

vay từ an mbostock tutorial.