d3.js - 只添加圈元素不更新现有

Question

我刚刚进入d3.js，我目前在我的svg的背景中有一个圆圈。我现在想添加5个额外的圈子绑定到特殊数据。

如果我通过selectAll来做到这一点，不幸的是只有4个圆圈与新的数据被追加。 5的第一个似乎选择了现有的并且没有更新。

如何在我的svg中添加一个现有的圈子，并添加5个与新数据绑定的圈子，并最终共有6个圈子？

下面是我的一些代码：

$(document).ready(function() { 


//draw svg 
var svgContainer = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600); 
//add group to contain all circles 
var svgGroup = svgContainer.append("g"); 

//add bg circle 
var bgCircle = svgGroup.append("circle") 
    .attr("cx", 300).attr("cy", 300).attr("r", 120) 
    .attr("fill", "black"); 

//add circles 
var circles = svgGroup.selectAll("circle") 
    .data([ 
     {cx: "250", cy: "300", r: "12", color: "red"}, 
     {cx: "300", cy: "300", r: "12", color: "red"}, 
     {cx: "350", cy: "300", r: "12", color: "red"}, 
     {cx: "400", cy: "300", r: "12", color: "red"}, 
     {cx: "450", cy: "300", r: "12", color: "red"}, 
    ]) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { return d.cx; }) 
    .attr("cy", function(d) { return d.cy; }) 
    .attr("r", function(d) { return d.r; }) 
    .attr("fill", function(d) { return d.color; }) }); 

你应该看到4个红色圆圈和一个黑色的背景。 我现在想要5个红色圆圈，并且仍然在背景中留下黑色。

请有人告诉我该怎么做。 我试图理解输入，更新和d3的退出来实现它，但是这并没有帮助太多...

在此先感谢 欢呼

Answer 1

我只是找到了一种方法如何做到这一点。 通过选择不是圆形元素，而是选择一个类名，我可以从新的选择中排除旧的圆形，因此5个元素仍然没有绑定数据，而d3增加了5个元素。

在此处查看示例代码。

$(document).ready(function() { 


//draw svg 
var svgContainer = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600); 
//add group to contain all circles 
var svgGroup = svgContainer.append("g"); 

//add bg circle 
var bgCircle = svgGroup.append("circle") 
    .attr("cx", 300).attr("cy", 300).attr("r", 120) 
    .attr("fill", "black"); 

//add circles 
var circles = svgGroup.selectAll(".dataCircle") 
    .data([ 
     {cx: "250", cy: "300", r: "12", color: "red"}, 
     {cx: "300", cy: "300", r: "12", color: "red"}, 
     {cx: "350", cy: "300", r: "12", color: "red"}, 
     {cx: "400", cy: "300", r: "12", color: "red"}, 
     {cx: "450", cy: "300", r: "12", color: "red"}, 
    ]) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { return d.cx; }) 
    .attr("cy", function(d) { return d.cy; }) 
    .attr("r", function(d) { return d.r; }) 
    .attr("fill", function(d) { return d.color; }) 



}); 

看看我选择的.circleData类。 生成的HTML没有任何地方的类...它可能是一个虚拟选择，它不再重要。 也许有人可以解释一些有关这种行为的细节，以及这是一种很好的方法来做到这一点，或者是一个很糟糕的方法。