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

을

감사합니다 도움이되지 않았다. circle 요소를 선택하지 않고 클래스 이름을 선택하면 새 선택에서 이전 원을 제외 할 수 있으므로 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에는 클래스가 없습니다 ... 더 이상 중요하지 않은 가상 선택입니다. 어쩌면 누군가가 그 행동에 대한 몇 가지 세부 사항을 설명 할 수있을 것입니다.