d3.js

Question

私はそれをやっているどのようにこれはd3.js

を使用して、時間をかけた値をプロットリアルタイム棒グラフを作成しようとしていますに既存の要素に要素を追加は。

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

問題は、新しい値がデータ配列に追加されるたびにグラフ全体を再描画することです。

毎回描画するのではなく、新しい値が配列に追加されるたびに、すでに描画されているバーグラフにバーを追加するにはどうすればよいですか？

Answer 1

終了しました。svg要素の再描画をやめてください。新しい要素を追加するだけであれば、描画関数は呼び出されたときにそれを行う必要があります。

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

あなたが探している効果の種類は不明ですが、this fiddleをご覧ください。 an mbostock tutorialから借り

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

} 

：それは右に成長していきますので、

次redraw機能が棒グラフに追加していきます。