d3分离点击并拖动节点和背景

Question

我正在尝试在d3力图中启用拖动行为，以便可以单击背景（不是节点或链接）并拖动（平移）整个图形，但也可以单独单击并拖动节点（无需平移）整个图表）。虽然我可以让每个单独工作，但当我组合代码时，背景rect似乎覆盖了节点，这样我就不能拖动节点而不拖动整个图形。我在下面列出了两个相关的代码片段，非常感谢您的帮助！

此代码可让我平移和缩放整个图表：

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);