D3力導向佈局：邊框

Question

一個非常類似的問題已經在這裏問：D3 force directed layout with bounding box ...我嘗試實施建議的解決方案，但都沒有成功，所以我會再問:(

這是我的代碼

// initialization stuff happening up here... 
// create graph:  

    this.onStateChange = function() { 

     svg.selectAll("g").remove(); 
     nodes = {}; 
     links = []; 

     links = eval(this.getState().string); 
     links.forEach(function(link) { 
     link.source = nodes[link.source] || (nodes[link.source] = {name : link.source}); 
     link.target = nodes[link.target] || (nodes[link.target] = {name : link.target}); 
     }); 

     force.nodes(d3.values(nodes)).links(links).start(); 

     path = svg.append("g").selectAll("path") 
      .data(force.links()).enter() 
      .append("path") 
      .attr("class", function(d) {return "link " + d.type;}) 
      .attr("marker-end", function(d) {return "url(#" + d.type + ")";}); 

     circle = svg.append("g").selectAll("circle") 
      .data(force.nodes()) 
      .enter() 
      .append("circle") 
      .attr("r", 8) 
      .call(force.drag); 

     text = svg.append("g").selectAll("text") 
      .data(force.nodes()) 
      .enter() 
      .append("text") 
      .style("font-size","15px") 
      .attr("x", 10) 
      .attr("y", ".42em").text(function(d) {return d.name;}); 
    }; 

//add gravity 
    function tick() { 

     path.attr("d", linkArc); 
     circle.attr("transform", transform); 
     text.attr("transform", transform); 


     circle.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); }) 
     .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); }); 

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


    } 

    function linkArc(d) { 
     var dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = Math.sqrt(dx * dx + dy * dy); 

     return "M" + d.source.x + "," 
      + d.source.y + "A" + dr + "," + dr 
      + " 0 0,1 " + d.target.x + "," + d.target.y; 
    } 

    function transform(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    } 
}; 

但是這並不工作 - 我不能再移動節點和他們被困在右上角

Answer 1

我發現它是如何去。如果有人想一個邊框添加到該mobile-。專利訴訟的例子（http://bl.ocks.org/mbostock/1153292），這可能是有幫助的：

function tick() { 
    //circle.attr("transform", transform); //no need for this anymore 

    circle.attr("cx", function(d) { return d.x = Math.max(8, Math.min(300 - 8, d.x)); }) 
      .attr("cy", function(d) { return d.y = Math.max(8, Math.min(280 - 8, d.y)); }); 
    text.attr("transform", transform); 
    path.attr("d", linkArc); 

    } 
    function linkArc(d) { 
     var dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = Math.sqrt(dx * dx + dy * dy); 

     return "M" + d.source.x 
       + "," + d.source.y 
       + "A" + dr 
       + "," + dr 
       + " 0 0,1 " + d.target.x 
       + "," + d.target.y; 
    } 
    //function transform(d) { //don't need this anymore either 
    //return "translate(" + d.x + "," + d.y + ")"; 
    //} 
};