D3.js從json更新條形圖

我正在使用d3.js在條形圖上工作，酒吧應該能夠對應一個新的json數據。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輸出：

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被保持縮放老JSON。

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

導致：

update width: wdthnew(15964) = 2312.246031746032

儘管15694是從舊的JSON，的wdthnew（d.value）實際上是從返回wdthnew（1411）至極是2312的值，它是出範圍..

有人可以幫我解決這個問題嗎？或者指出我做錯了什麼？我是新來的d3.js和JavaScript。對於壞語法我很抱歉。英語不是我的母語。

的jsfiddle這裏：http://jsfiddle.net/saido/5mREA/

來源

2012-04-25 Frendhi

也許創建一個緩衝器陣列/對象，將事先存儲的數據，以使用它...則創建新的數據到達之前，將不更新的更新間隔。

更新：下面是一個例子

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

來源

2012-04-25 23:26:21 August

感謝您的回覆，Augustum。你能更具體地關於創建更新間隔嗎？ – Frendhi 2012-04-27 19:07:05

我用一個例子更新了我的回覆。希望這可以幫助！ – August 2012-05-01 21:18:13

我發現了問題！再次感謝Augustum。 – Frendhi 2012-05-02 12:37:07

原來，問題是function makebar(): 在此行中我應該附加新的數據：

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

現在的console.log表現並計算適當的值。

對不起，我不確定如何更詳細地解釋技術問題。

來源

2012-05-02 12:35:55 Frendhi

D3.js從json更新條形圖

回答

相關問題