graph - d3クリックアンドドラッグをノードと背景から分離する

Question

d3フォースグラフでドラッグ動作を有効にして、背景（ノードやリンクではない）をクリックしてグラフ全体をドラッグ（パン）するだけでなく、ノードを個別にクリックしてドラッグ（グラフ全体をパンせずに）できるようにしようとしています。 ）。それぞれを個別に機能させることはできますが、コードを組み合わせると、背景のrectがノードをオーバーライドしているように見えるため、グラフ全体をドラッグせずにノードをドラッグすることはできなくなります。以下に関連する2つのコードを含めましたが、助けていただければ幸いです。

このコードを使用すると、グラフ全体をパンおよびズームできます。

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