JavaScript的問題與渲染更新圖表D3

我想繪製一個圖表，當我在這裏使用代碼呈現罰款：http://jsfiddle.net/skzBt/1/。但下面的代碼不起作用。JavaScript的問題與渲染更新圖表D3

ws = new WebSocket("ws://localhost:8888/dh"); 

var buffer = [['1', [0]], ['2', [0]], ['3', [0]], ['4', [0]]]; 
var data = []; 

var w = 500; 
var h = 300; 
var barPadding = 1; 

var chart = d3.select("#chart").append("svg:svg") 
//.attr("class", "chart"); 
.attr("width", w).attr("height", h); 

function draw() { 
    chart.selectAll("rect").data(data).enter().append("svg:rect").attr("x", function(d, i) { 
     return i * (w/data.length); 
}).attr("y", function(d) { 
    return h - (d * 4); 
}).attr("width", w/data.length - barPadding).attr("height", function(d) { 
    return d * 4; 
}).attr("fill", function(d) { 
    return "rgb(0, 0, " + (d * 10) + ")"; 
}); 

chart.selectAll("text").data(data).enter().append("svg:text").text(function(d) { 
    return d; 
}).attr("text-anchor", "middle").attr("x", function(d, i) { 
    return i * (w/data.length) + (w/data.length - barPadding)/2; 
}).attr("y", function(d) { 
    return h - (d * 4) + 14; 
}).attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "white"); 

}; 


//draw();  
ws.onmessage = function(evt) { 
    data.length = 0; 
    var distances = JSON.parse(evt.data); 
    console.log(distances); 
    for (var i = 0; i < buffer.length; i++) { 
     if (buffer[i][0] == distances.miles) { 
      buffer[i][1][0]++; //add the new miles to the total from previous iteration 
     } 
    } 
    console.log(buffer); 

    for (var i = 0; i < buffer.length; i++) { 
     data.push(buffer[i][1][0]); 
     console.log(data); 
     draw(); //redraw the graph 
    } 
}

我認爲它必須做一些與data.length = 0;因爲沒有它的圖形呈現BUT每個項目添加額外的列。我希望每次更新陣列數據時都要重新繪製圖形。我知道數據正在以遞增的值進行更新。

我真的很困惑，並卡在這裏，真的很感激幫助請。

感謝

編輯：

經過測試函數draw（）的作品，我可以看到「數據」數組中正確地遞增值，什麼似乎發生的是，功能只調用一次因爲它只繪製一次值然後停止。

來源

2012-12-09 user1869421

'console.log（距離）;'yield？ –

Hi it yield：（{miles：3}）它會返回範圍從1到4的距離作爲英里數 – user1869421

如果數據中有多個里程，會怎麼樣？ –

您應該能夠簡化.onmessage處理程序如下：

var data = [0, 0, 0, 0]; 
... 
ws.onmessage = function(evt) { 
    var distances = JSON.parse(evt.data); 
    data[distances.miles-1]++; 
    draw(); 
}

所有其他問題必須draw()函數內。恐怕我不是d3的專家，所以你不得不插手。廣泛的API文檔將是您最好的朋友。

來源

2012-12-10 03:08:33

嗨我試過以上，它給了我一個405錯誤;方法不允許。謝謝 – user1869421

建議的代碼只不過是更新'data'數組，並且不可能引發HTTP錯誤。它一定是出自你正在嘗試的其他東西。 –

JavaScript的問題與渲染更新圖表D3

回答

相關問題