在D3js中再次绑定数据

Question

我将数据首次绑定在d3js中，如下所示。

var svg=d3.select("body").append("svg"); 

var circle = svg.selectAll("circle") 
.data([32, 57, 293]).enter(); 

circle.append("circle") 
.attr("cy", 60) 
.attr("cx", function(d, i) { return i * 100 + 30; }) 
.attr("r", function(d) { return Math.sqrt(d); }); 

现在我想推送给定数组中的数据，并且还想绘制它的圆。它将如何绘制？我正在这样做。

var circle = svg.selectAll("circle") 
.data([93]).enter(); 

circle.append("circle") 
.attr("cy", 60) 
.attr("cx", function(d, i) { return i * 100 + 30; }) 
.attr("r", function(d) { return Math.sqrt(d); }); 

请帮我解决这个问题。

Answer 1

行做这样的事情，你需要做一个更新function update(data)：

如下图所示：

//make an svg 
var svg=d3.select("body").append("svg").attr({ 
     "width": "500px", 
     "height": "500px" 
    }); 
var data = [32, 57, 293]; 
update(data); 
//add a node after 5 seconds 
setTimeout(function(){ data.push(90); update(data) }, 5000); 

//remove a node after 10 seconds 
setTimeout(function(){ data.pop(); update(data) }, 10000); 


function update(ary){ 
    //selection of sircle from svg 
    var circle = svg.selectAll("circle") 
    .data(ary); 
    //add circle 
    circle.enter().append("svg:circle") 
    .attr("cy", 60) 
    .attr("cx", function(d, i) { return i * 100 + 30; }) 
    .attr("r", function(d) { return Math.sqrt(d); }); 
    //remove any circle which is not in selection 
    circle.exit().remove(); 
} 

工作代码here

这是一个很好的read将清除所有关心和帮助你了解这个概念:)

希望这会有所帮助