D3 강제 배치 그래프에 OnClick 이벤트 추가

Question

강제 레이아웃 그래프의 노드에 OnClick 이벤트를 추가하려고하지만 클릭하려고하면 아무 일도 일어나지 않습니다. 그 이유는 svg 요소를 사용하지 않고 .on ("click", click)을 사용하는 것은 svg 요소에서만 작동하지만 완전히 확신 할 수 없기 때문이라고 생각합니다. 다음은 구현하려는 코드입니다.

var node = svg.selectAll(".node") 
.data(nodes) 
    .enter().append("circle") 
.attr("r",function(d) {return d.size}) 
    .style("fill",function(d) {return color(d.type);}) 
.on("click", click) 
    .call(force.drag); 

    node.append("title") 
    .text(function(d){return d.name;}); 

    force.on("tick", function(){ 
    node.attr("cx", function(d){return d.x;}) 
    .attr("cy", function(d) {return d.y;}); 

    link.attr("x1", function(d){return d.source.x;}) 
    .attr("y1", function(d){return d.source.y;}) 
    .attr("x2", function(d){return d.target.x;}) 
    .attr("y2", function(d) {return d.target.y;}); 
}); 


function click() { 
    d3.select(this).select("circle").transition() 
    .duration(750) 
    .attr("r", 30) 
    .style("fill", "lightsteelblue"); 
     } 

노드를 클릭하면 아무 일도 일어나지 않습니다. 나는 무엇을해야할지 모르겠다. 나는 문제가 함께 할 수 있다고 생각 :

.enter().append("circle") 

내가이는 SVG 같은 요소 ("g") 또는 ("SVG") 할 필요가 있지만, 나는 그것을 알아낼 수 있다고 생각. 어떤 조언이나 제안을 주시면 감사하겠습니다. 감사!

Answer 1

.select("circle")이 click()에 있습니다. 대신, 그것은 단지로 시작해야합니다 :

function click(){ 
    d3.select(this).transition()... 
}