將OnClick事件添加到D3強制佈局圖

我想向我的強制佈局圖的節點添加一個OnClick事件，但是當我嘗試單擊它們時，沒有任何反應。我相信這是因爲我沒有使用svg元素，而.on（「click」，click）只能用於svg元素，但我並不完全確定。這裏是我試圖實現的代碼：將OnClick事件添加到D3強制佈局圖

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」），但我不明白這一點。任何意見或建議，將不勝感激。謝謝！

來源

2014-06-24 nocodaoh.2013

我不認爲你需要''.select（「circle」）''click（）''。拖動工作，而不是過渡？如果你有[JSFiddle]（http://jsfiddle.net），可能會更容易診斷。 – mdml

你說得對。 .select（「circle」）是不必要的。謝謝！ –

太棒了！這是唯一的問題嗎？ – mdml

您在click()中有額外的.select("circle")。相反，它應該從下面開始：

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

來源

2014-06-24 20:22:28 mdml

將OnClick事件添加到D3強制佈局圖

回答

相關問題