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() 进行更多测试后，我可以看到“数据”数组中的值正确递增，并且似乎发生的情况是该函数仅被调用一次，因为它仅绘制一次值然后停止。

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 回答