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

我正在尝试创建一个实时条形图，使用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元素。 如果你只需要添加新的元素，那么这就是你的绘制函数在被调用时应该做的事情。

 var dataset = [ 5, 10, 15, 20, 25 ]; var w = 1800; var h = 300; var barPadding = 1; var container = d3.select("body").append("svg").attr("width", w).attr("height", h).append("g"); setInterval(function(){ dataset.push(Math.floor(Math.random()*51)); draw(); },1000); function draw(){ container.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) + ")";}); }​ 

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

Answer 2

不知道你正在寻找什么样的效果，但看看这个小提琴 。

以下redrawfunction将继续添加到条形图，以便它继续向右增长：

 function redraw() { var rect = svg.selectAll("rect") .data(dataset); rect.enter().insert("rect", "line") .attr("x", function(d, i) { return 12*(i+1); }) .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) + ")";}) rect.transition() .duration(800) .attr("x", function(d, i) { return 12*i; }); } 

借用mbostock教程 。