Tự động cập nhật dữ liệu biểu đồ trong D3

Question

Tôi đang làm việc trên hình ảnh trực quan của dữ liệu đến. Tôi sử dụng D3 cho trực quan và bắt đầu dựa trên ví dụ này: http://bl.ocks.org/mbostock/3883195

Đây là phiên bản Tôi hiện đang làm việc trên:

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 500 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.linear().range([height, 0]); 

    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
    var yAxis = d3.svg.axis().scale(y).orient("left"); 

    var area = d3.svg.area() 
     .x(function(d) { return x(d.x); }) 
     .y0(height) 
     .y1(function(d) { return y(d.y); }); 

    var svg = d3.select("div#chart").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 data = [[1,1],[2,3],[3,2],[4,4]]; 

    var dataCallback = function(d) { 
    d.x = +d[0]; 
    d.y = +d[1]; 
    }; 
    data.forEach(dataCallback); 

    x.domain(d3.extent(data, function(d) { return d.x; })); 
    y.domain([0, d3.max(data, function(d) { return d.y; })]); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 

    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("Number of Messages"); 

này tạo ra các đồ thị dưới đây:

Bây giờ, vì nó nên tự cập nhật thường xuyên, tôi muốn cập nhật động dữ liệu trong biểu đồ bằng cách sử dụng mã sau:

var n = svg.selectAll("path").data([5,20]) 
    n.enter(); 
    n.exit().remove(); 

Tuy nhiên, điều đó không hiệu quả. Tôi mới đến D3 và vẫn đang học những điều cơ bản. Lý tưởng nhất là hiển thị đồ thị chuyển sang bên trái và dữ liệu mới được hiển thị trong biểu đồ. Nhưng cho đến nay tôi thậm chí không thể thêm dữ liệu mới vào nó. Ai đó có thể giúp tôi với điều đó? Tôi cũng đã tìm kiếm các ví dụ tương tự như thế này, nhưng không tìm thấy bất cứ điều gì thực sự giúp tôi cho đến nay.

Answer 1

d3 khá tốt trong việc theo dõi dữ liệu nào đã được thêm vào và nội dung nào đang bị xóa - thực hiện điều này với các tham gia. Hãy nhìn vào http://bl.ocks.org/mbostock/3808218

NẾU chúng tôi sử dụng dữ liệu ràng buộc (thay vì "cột mốc")

svg.append("path") 
    .data([data]) 
    .attr("class", "area") 
    .attr("d", area); 

và sau đó vào bản cập nhật làm điều gì đó như:

// update the list of coordinates 
data.splice(0,1); 
data.push([5,20]); 

// re-decorate the last, newly added item 
dataCallback(data[data.length - 1]); 

// You will also need to update your axes 
x.domain(d3.extent(data, function(d) { return d.x; })); 
y.domain([0, d3.max(data, function(d) { return d.y; })]); 

// update the data association with the path and recompute the area 
svg.selectAll("path").data([data]) 
    .attr("d", area); 

Và bạn sẽ nhận được khu vực của bạn cập nhật.

Bạn có thể thử nó ra here

Với cách dữ liệu của bạn được tổ chức bằng cách sử dụng dữ liệu tham gia (thay vì mốc tính toán) có thể không làm cho nhiều sự khác biệt. Lưu ý rằng ở đây phần tử dữ liệu (đơn) mà bạn đang liên kết với đường dẫn là danh sách đầy đủ các tọa độ để cập nhật khu vực bạn cần phải vượt qua trong một danh sách tọa độ đầy đủ mới.

Nếu bạn thực sự muốn giảm thiểu số tiền bạn cần vẽ lại, bạn có thể chia nhỏ khu vực và vẽ từng đoạn đường. Sau đó, về cơ bản bạn rơi trở lại ví dụ biểu đồ thanh nhưng với các thanh không bằng phẳng và không có khoảng trắng.