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