javascript - 在 d3 力布局中拖动和平移

Question

我正在制作一个显示作者关系的力量布局图。由于数量较多，我尝试实现缩放和拖动。缩放效果很好(有一个异常(exception))，但是当我拖动节点时，它也会拖动背景。我尝试按照 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; });
  }

Answer 1

我想我已经明白了。

我必须结合 here 中的说明和 here ，这已经在 answer 中得到了回答。我链接了。

我的旧方法，从第一个示例中获取，如下所示:

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

问题是我关注的是 d3.behavior.drag() 而不是 force.drag，我认为 Stephen Thomas 试图告诉我这一点。它应该看起来像这样:

//code code code//

function dragstarted(d) {
   d3.event.sourceEvent.stopPropagation();
   d3.select(this).classed("dragging", true);
}

function dragged(d) {
   d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
   d3.select(this).classed("dragging", false);
}

//code code code//

var drag = force.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);