0

グラフを描画しようとしています。ここでコードを使用すると、正常にレンダリングされます：http: //jsfiddle.net/skzBt/1/。しかし、以下のコードは機能しません。

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で何かをしなければならないと思います。それがないと、グラフはレンダリングされますが、各項目に追加の列が追加されます。配列データが更新されるたびにグラフを再描画したい。データが増分値で更新されていることを知っています。

私は本当に混乱してここで立ち往生しているので、助けていただければ幸いです。

ありがとう

編集：

関数draw（）が機能することをさらにテストした後、'data'配列の値が正しく増分していることがわかります。関数は、値を1回だけプロットしてから停止するため、1回だけ呼び出されるようです。

4

1 に答える 1

0

次のように .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-10T03:08:33.987 に答える