我正在尝试将 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")
我认为它需要是像 ("g") 或 ("svg") 这样的 svg 元素,但我无法弄清楚。任何意见或建议将不胜感激。谢谢!
最佳答案
您在 click()
中有一个额外的 .select("circle")
。相反,它应该从以下内容开始:
function click(){
d3.select(this).transition()...
}
关于javascript - 将 OnClick 事件添加到 D3 强制布局图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24394369/