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将帮助您理解这个概念。

在D3js中再次绑定数据

1 个答案: