Question

我正在尝试绘制图表，当我在这里使用代码时，渲染效果很好：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;做一些事情，因为没有它，图形呈现BUT为每个项目添加额外的列。我想每次更新数组数据时重绘图形。我知道数据正在使用递增的值进行更新。

我真的很困惑并且被困在这里，非常感谢你的帮助。

由于

编辑：

在更多测试函数draw（）工作之后，我可以看到'data'数组中的值正确递增，并且似乎发生的是该函数只调用一次，因为它只绘制一次值然后停止。

Answer 1

您应该能够简化.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文档将是您最好的朋友。

在D3中渲染更新图表的Javascript问题

1 个答案: