在d3力布局中拖动和平移

我正在研究一个显示作者关系的力布局图。由于有这么多,我尝试实现缩放和拖动。缩放效果很好(只有一个例外),但当我拖动节点时,它也会拖动背景。我试着听从Mike Bostock的指示 here 和 the StackOverflow question paired with it ,但它仍然不起作用。我基于图形的大部分代码 this ,效果很好,但由于他使用了旧版本的d3,所以在新版本中他的拖动中断。(我不能只使用旧版本的d3,因为我有一些图中未显示的其他部分,仅适用于较新版本。)

我认为这个问题与我对SVG对象的分组有关,但我也无法弄清楚我在那里做错了什么。这也带来了一个缩放问题;当我放大或平移时,图例也会移动和放大。如果有一个简单的解决方案可以让它保持静止并在图形上方“悬停”,那就太好了。

我对编码很陌生,所以我可能犯了非常愚蠢的错误,但如果有任何帮助,我将不胜感激。

Fiddle.

var graphData = {
nodes: [
  {
    id:0,
    name:"Plotinus"
  },
  {
    id:1,
    name:"Iamblichus"
  },
  {
    id:2,
    name:"Porphyry"
  }
],
links: [
  {
    relationship:"Teacher/student",
    source:0,
    target:1
  },
  {
    relationship:"Enemies",
    source:0,
    target:2
  },
  {
    relationship:"Family",
    source:1,
    target:2
  }
 ]
};


var linkColor = d3.scale.category10(); //Sets the color for links

var drag = d3.behavior.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
    .on("drag", function(d) {
        d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    });

var w = 300,
    h = 300;

var vis = d3.select(".graph")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all")
    .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'rgba(1,1,1,0)');

function redraw() {
    vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } 

    var force = d3.layout.force()
        .gravity(.6)
        .charge(-600)
        .linkDistance( 60 )
        .size([w, h]);

    var svg = d3.select(".text").append("svg")
        .attr("width", w)
        .attr("height", h);

        var link = vis.selectAll("line")
            .data(graphData.links)
            .enter().append("line")
            .style("stroke", function(d) { return linkColor(d.relationship); })
            .style("stroke-width", 1)
            .attr("class", "connector");

        var node = vis.selectAll("g.node")
            .data(graphData.nodes)
            .enter().append("svg:g")
            .attr("class","node")
            .call(force.drag);

            node.append("svg:circle")
              .attr("r", 10) //Adjusts size of nodes' radius
              .style("fill", "#ccc"); 

            node.append("svg:text")
                .attr("text-anchor", "middle") 
                .attr("fill","black")
                .style("pointer-events", "none") 
                .attr("font-size", "9px")
                .attr("font-weight", "100")
                .attr("font-family", "sans-serif")
                .text( function(d) { return d.name;} );


// Adds the legend.   
      var legend = vis.selectAll(".legend")
          .data(linkColor.domain().slice().reverse())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(-10," + i * 20 + ")"; });

      legend.append("rect")
          .attr("x", w - 18)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", linkColor);

      legend.append("text")
          .attr("x", w - 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .attr("class", "legendText")
          .style("text-anchor", "end")
          .text(function(d) { return d; });

    force
        .nodes(graphData.nodes)
        .links(graphData.links)
        .on("tick", tick)
        .start();

  function tick() {
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("transform", function(d) { return "translate(" + d.x + "," + 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; });
  }