D3 selectAll은 (는) 색상이 변경됩니다.

Question

D3에 익숙하지 않아 케이스에 붙어 있습니다. 내 SVG에 서클을 추가하는 버튼이 있습니다.

d3.select("button#add").on("click", function() 
    { 
     svg.append('circle') 
     .attr('class', 'little') 
     .attr("cx", Math.random()*280+10) 
     .attr("cy",Math.random()*280+10) 
     .attr("r", 12); 
    }); 

이후 원을 클릭하면 색상을 변경하고 싶습니다. 어떤 이유로 코드가 이벤트를 시작하지 않습니다.

d3.selectAll(".little").on('click', function() 
    { 
     d3.select(this).style("fill", "red"); 
    }); 

Answer 1

여기에 FIDDLE이 나와 있습니다.

d3.selectAll(".little").on('click', function() { 
     d3.select(this).style("fill", "red"); 
}); 

한 번만 실행 :

... 
function paintCircle(d) { 
    d3.select(this) 
     .style("fill", "red"); 
}; 

Answer 2

문제는이 사실에있다. 그러나 버튼 클릭으로 새로운 원이 만들어 질 때 onclick 속성을 추가하지 않고 버튼을 만들면 위 코드가 다시 실행되지 않으므로 새 원에는 클릭 이벤트 리스너가 없습니다.

수정하려면 원을 만들 때 .on 부분을 추가하거나 새로운 원이 만들어 질 때마다 위 코드가 실행되는지 확인하십시오 (콜백 함수가 없으면이 방법을 사용하지 않는 것이 좋습니다. 변경 될 때마다).