将元素追加到d3.js中的现有元素

Question

我正在尝试创建一个实时条形图,使用d3.js绘制随时间变化的值

这就是我这样做的方式.

var dataset = [ 5, 10, 15, 20, 25 ];
var w = 1800;
var h = 500;
var barPadding = 1;

setInterval(function(){
    dataset.push(Math.floor(Math.random()*51));
    draw();
},1000);

function draw(){

    d3.select("svg").remove();
    var svg = d3.select("body")
            .append("svg")
        .attr("width", w)
        .attr("height", h);

    svg.selectAll("rect").data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i){return 12*i;})
        .attr("y", function(d){return h -d*4; })
        .attr("width", 11)
        .attr("height", function(d) { return d * 4; })
        .attr("fill", "teal")
        .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});
}

问题是每次将新值添加到数据数组时,我都会重绘整个图形.

每次将新值添加到数组时,如何将条形附加到已绘制的条形图,而不是每次都重新绘制它？

Answer 1

你已经很接近了，只需停止重绘svg元素即可。如果您只需要添加新元素，那么这就是您的绘图函数在调用时应该执行的操作。

\n\n

var dataset = [ 5, 10, 15, 20, 25 ];\nvar w = 1800;\nvar h = 300;\nvar barPadding = 1;\n\nvar container = d3.select("body").append("svg").attr("width", w).attr("height", h).append("g");\n\nsetInterval(function(){\n    dataset.push(Math.floor(Math.random()*51));\n    draw();\n},1000);\n\nfunction draw(){\n\n    container.selectAll("rect").data(dataset).enter().append("rect")\n        .attr("x", function(d, i){return 12*i;})\n        .attr("y", function(d){return h -d*4; })\n        .attr("width", 11)\n        .attr("height", function(d) { return d * 4; })\n        .attr("fill", "teal")\n        .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});\n}\xe2\x80\x8b\n

\n\n

http://jsfiddle.net/Wexcode/LYqfU/

\n