d3强制有向图在svg上离开，分成节点组

Question

我的力有向图被正确绘制。但它不会保持不变。我稍微移动一下svg，有时一些节点从可见性中消失，留下节点簇。这是图最初如何看起来：

一段时间以后，它看起来像这样：节点也水涨船高每一个地方从DIV远

var graph = new Object(); 
var map = new Object(); 
var index = 0; 

var linkIndex = 0; 

var width = $("#d3graph").width(); 
var height = $("#d3graph").height() ; 


var svg = d3.select("#d3graph").append("svg:svg") 
     .attr("width", width) 
     .attr("height", height); 

// tool tip with the label 
var tip = d3.tip() 
     .attr('class', 'd3-tip') 
     .offset([-10, 0]) 
     .html(function (d) { 
      return d.name + ""; 
     }) 
svg.call(tip); 

/* I take nodes and edges from outside. That part works fine*/ 

graph.links = dataset2; 
graph.nodes = dataset1; 

function drapGraph(graph) { 

    svg.selectAll("g.link").remove(); 
    svg.selectAll("g.gnode").remove(); 

    var force = self.force = d3.layout.force() 
      .nodes(graph.nodes) 
      .links(graph.links) 
      .gravity(.05) 
      .distance(30) 
      .charge(-120) 
      .size([width, height]) 
      .start(); 

    //map radius domain--> range 
    var rScale = d3.scale.linear() 
      .domain([d3.min(graph.nodes, function (d) { 
       return Math.log(d.group); 
      }), d3.max(graph.nodes, function (d) { 
       return Math.log(d.group); 
      })]) 
      .range([0, 30]); 

    var link = svg.selectAll(".link") 
      .data(graph.links) 
      .enter().append("line") 
      .attr("class", "link") 
      .style("stroke-width", 2) 
      .style("stroke-length", function (d) {return (10000/d.value);}); 

    var node = svg.selectAll("g.gnode") 
      .data(graph.nodes) 
      .enter().append("g") 
      .attr("class", "gnode") 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide) 
      .call(force.drag); 

    var maxretweets = d3.max(graph.nodes, function (d) { 
     return Math.log(d.group); 
    }); 
    var minretweets = d3.min(graph.nodes, function (d) { 
     return Math.log(d.group); 
    }); 
    var maxContent = d3.max(graph.nodes, function (d) { 
     return d.degree; 
    }); 
    var minvalue = d3.min(graph.links, function (d) { 
     return d.value; 
    }); 

    var circle = node.append("circle") 
      .attr("r", function (d) { 
       return rScale(Math.log(d.group)); 
      }) 
      .style("fill", function (d) { 
       return d.color; 

      }) 
      .style("stroke", "#000000") 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide) 
      .call(force.drag); 

    //give you nodes with labels 
    var label = node.append("text") 
      .style("font-family", "sans-serif") 
      .style("text-anchor", "middle") 
      .style("font-size", "8") 
      .style("stroke", "#404040") 
      .text(function (d) { 
       if (rScale(Math.log(d.group)) > 5) { 
        return d.name; 
       } 
      }); 



    force.on("tick", function() { 

     node.attr("cx", function (d) { 
      return d.x; 
     }) 
     .attr("cy", function (d) { 
      return d.y; 
     }); 

     circle.attr("cx", function (d) { 
      return d.x; 
     }) 
     .attr("cy", function (d) { 
      return d.y; 
     }); 

     label.attr("x", function (d) { 
      return d.x; 
     }) 
     .attr("y", function (d) { 
      return 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; 
     }); 
    }); 

    svg.selectAll("g").attr("x", function (d) { 
            return d.x; 
          }) 
         .attr("y", function (d) { 
           return d.y; 
           }); 
} 

有人可以帮我解决这个问题呢？这里有一个小问题，但我无法弄清楚，我尝试了很多东西，但它仍然不起作用。

Answer 1

我会建议使用有界的x和y值来解决这些问题。

尝试计算x和y在tick函数中的位置，如下所示。

node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) 
    .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 

请参考here的样本。

编辑：没有必要单独更新圆圈和文本位置，因为它们是分组的。只需要如下更新组元素和链接。

force.on("tick", function() { 
    svg.selectAll("g.node") 
     .attr("transform", function (d) { 
      d.x = Math.max(radius, Math.min(width - radius, d.x)); 
      d.y = Math.max(radius, Math.min(height - radius, d.y)); 
      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; 
     }); 
    }); 
}