D3.js jsonの棒グラフを更新する

Question

私はd3.jsを使って棒グラフを作成しています。棒グラフは新しいjsonデータに対応しています。ここ

var m = [30, 5, 5, 5], 
    w = 375 - m[1] - m[3], 
    h = 260 - m[0] - m[2]; 

var format = d3.format(",.0f"); 

var wdthnew = d3.scale.linear().range([0, w]), 
    wdth = d3.scale.linear().range([0, w]).domain([0, 25000]), 
    hght = d3.scale.ordinal().rangeRoundBands([0, h], .1); 

var svg = d3.select("body").append("svg") 
    .attr("width", w + m[1] + m[3]) 
    .attr("height", h + m[0] + m[2]) 
    .append("g") 
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

d3.json("barchartjson.php", function(data) { 

    data.sort(function(a, b) { return b.value - a.value; }); 
    hght.domain(data.map(function(d) { return d.orientation; })); 

    var bar = svg.selectAll("g.bar") 
     .data(data) 
    .enter().append("g") 
     .attr("class", "bar") 
     .attr("transform", function(d) { return "translate(0," + hght(d.orientation) + ")"; }); 

    bar.append("rect") 
     .attr("id", "activebar") 
     .attr("width", 0) 
     .attr("height", hght.rangeBand()) 
    .transition() 
    .delay(100) 
    .duration(1000)  
     .attr("width", function(d) { return wdth(d.value); });  
}); 

function makebar(date1, date2) { 
var barchartjson = "barchartjson.php?df="+date1+"&dl="+date2; 

d3.json(barchartjson , function(datanew) { 

    datanew.sort(function(a, b) { return b.jumlah - a.jumlah; }); 

    wdthnew.domain([0, d3.sum(datanew, function(d) { return d.value; })]); 

    console.log("SUM datanew: "+ d3.sum(datanew, function(d) { return d.value; })); 
    console.log("Array datanew: "); 
    console.log(datanew); 
    var updatebar = svg.selectAll("#activebar"); 

    updatebar.transition().duration(1000) 
     .attr("width", function(a) { console.log("update width: wdthnew("+a.value+") = "+wdthnew(a.value)); 
     return wdthnew(a.value); }); 
}); 
} 

初めてで使用barchartjson.phpからJSONである：

[{"orientation":"negatif","value":"15964"},{"orientation":"netral","value":"2788"},{"orientation":"positif","value":"9701"}] 

バーが最初に正しく表示されています。 問題はmakebar（）が呼び出され、バー幅を新しいjsonデータで更新する場合です。各バーの幅は更新されますが、場合によっては範囲外です。 は、ここではconsole.logから出力されます：新しいJSONが正常に呼び出され

SUM datanew: 2520 
Array datanew: 
[Object 
value: "1411" 
orientation: "negatif" 
__proto__: Object 
, 
Object 
value: "846" 
orientation: "positif" 
__proto__: Object 
, 
Object 
value: "263" 
orientation: "netral" 
__proto__: Object 
] 
update width: wdthnew(15964) = 2312.246031746032 
update width: wdthnew(9701) = 1405.1051587301588 
update width: wdthnew(2788) = 403.81746031746036 

が、ログは古いJSONをスケーリングwdthnew維持されていることを示します。 wdthnew（1411）WICHが2312から値を返す実際15694にもかかわらず

update width: wdthnew(15964) = 2312.246031746032 

古いJSONからのものである、 wdthnew（d.value）であり、それは外である：

updatebar.transition().duration(1000) 
     .attr("width", function(a) { console.log("update width: wdthnew("+a.value+") = "+wdthnew(a.value)); 
     return wdthnew(a.value); }); 

得範囲..

誰かがこの問題を解決するのに役立つことができますか？私が間違っているところを指摘していますか？私はd3.jsとjavascriptを初めて使っています。 悪い文法には申し訳ありません。英語は母国語ではありません。ここ

jsFiddle：http://jsfiddle.net/saido/5mREA/

Answer 1

はおそらくそれを使用する前にデータを格納するバッファ配列/オブジェクトを作成するには...次に、新しいデータが到着する前に更新されません更新間隔を作成します。

アップデート：ここでは一例です

var data = [{x: 1, y: 3}, 
      {x: 2, y: 4}, 
      {x: 3, y: 5}, 
      ... 
      ]; 

var incomingData = []; 

/* incoming data gets .pushed(...) in every 1 or 
    2 seconds, depending on network traffic */ 

var updateDelay = 3000; 

setInterval(function() { 
     for (var index = 0; index < data.length; index++) { 
      seriesData.shift(); 
      seriesData.push(incomingData.shift()); 
      redrawGraph(); 
     } 
    }, updateDelay); 

Answer 2

は問題が判明、私は新しいデータを添付することになって、このラインでfunction makebar(): にあった：今

var updatebar = svg.selectAll("#activebar").data(datanew); 

にconsole.logを示します適切な値を計算します。

私は申し訳ありませんが、私は技術的な問題をもっと詳しく説明する方法がわかりません。