我正在尝试在 d3 力图中启用拖动行为,以便可以单击背景(不是节点或链接)并拖动(平移)整个图形,但也可以独立单击并拖动节点(无需平移整个图形)。虽然我可以让每个单独工作,但当我组合代码时,背景矩形似乎覆盖了节点,因此我不能再拖动节点而不拖动整个图形。我在下面包含了两个相关的代码,非常感谢任何帮助!
这段代码让我可以平移和缩放整个图表:
vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("svg:g");
此代码允许我拖动并单击一个节点 - 但仅当不包含上述代码时:
var node = vis.selectAll("circle.node")
.data(json.nodes)
.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 6)
.style("fill", function(d) { return groupColors[(d.group)-1]; }) // fill(d.group)
.on("click", function(d) {
node.style("stroke","#FFFFFF");
d3.select(this).style("stroke","red");
clickNode(d);
})
.call(force.drag);