Question

我有一个包含简单节点和链接的力图。每个节点都是svg文件500x500。

我实现了缩放和拖动。
单击某个节点时，该节点在其他人被释放时变得固定

问题是，如果我拖动一个节点然后平移，会出现奇怪的弹出线和黑色形状。

我不知道如何用文字表达，所以我录制了这段视频。我用过Firefox：

https://drive.google.com/file/d/0B2W405T4XZ7ZZDlLRkc0RE01NG8/view?usp=sharing

编辑：我添加了json

{
  "nodes":[
    {"name":"Mohamed","type":"CEO"},
    {"name":"Google.Inc","type":"Company"},
    {"name":"Apple","type":"Company"},
    {"name":"Leonardo Decaprio","type":"CEO"},
    {"name":"Prisoner A","type":"Prisoner"},
    {"name":"National Bank of Hakuna","type":"Bank"},
    {"name":"Shanghai Major Bank","type":"Bank"},
    {"name":"Boeing 747","type":"Boat"},
    {"name":"Company Ltd.","type":"Company"},
    {"name":"Shanghai Major Bank","type":"Bank"},
    {"name":"Boeing 747","type":"Boat"}
  ],
"links":[
    {"source":0,"target":1,"value":1},
    {"source":1,"target":3,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":3,"target":2,"value":6},
    {"source":3,"target":4,"value":1},
    {"source":5,"target":0,"value":1},
    {"source":6,"target":0,"value":1},
    {"source":7,"target":0,"value":1},
    {"source":8,"target":0,"value":2},
    {"source":3,"target":1,"value":1}
]}

编辑：我按照要求添加了源代码。

var force = d3.layout.force()
.charge(-1000)
.linkDistance(80)
.gravity(.05)
.size([width, height]);

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

var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 10])
    .on("zoom", zoomed);




var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

var container = svg.append("g");

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
   d3.event.sourceEvent.stopPropagation();
   d3.select(this).classed("dragging", true);
}

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

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


d3.json("pst.json", function(error, graph) {
  if (error) throw error;

   root=graph.nodes[0];
    root.x = width / 2;
    root.y = height / 2;
    root.fixed = true;


  var link = container.append("g").selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = container.append("g").selectAll(".node")
      .data(graph.nodes)
      .enter()
      .append("image")
      .attr("xlink:href",function(d){return d.type+ ".svg" ;})
      .attr("class", "node")
      .attr("x", function(d) { return d.x+12; })
      .attr("y", function(d) { return d.y+12; })
      .attr("width", "24px")
      .attr("height", "24px")
      .call(force.drag)
      .on("click",click);

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start(); 

  node.append("title")
      .text(function(d) { return d.name; });

  function click(node) {
   root.fixed = false;
   root=node;
   root.fixed=true;

}

  force.on("tick", function() {
    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; });

    node.attr("x", function(d) { return d.x-12; })
     .attr("y", function(d) { return d.y-12; });   
  });
});

D3力布局在拖动时创建奇怪的线条和黑色矩形

0 个答案: