将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强制布局图

回答

相关问题