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

내가 어떻게되는지 알아 낸 사람이 된 모바일에 경계 상자를 추가하고자하는 경우.. 특허 슈트 예 (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 + ")"; 
    //} 
};