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沒有任何地方的類...它可能是一個虛擬選擇，它不再重要。 也許有人可以解釋一些有關這種行爲的細節，以及這是一種很好的方法來做到這一點，或者是一個很糟糕的方法。