D3力导向布局：边框

一个非常类似的问题已经在这里问：D3 force directed layout with bounding box ...我尝试实施建议的解决方案，但都没有成功，所以我会再问:(D3力导向布局：边框

这是我的代码

// 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 + ")"; 
    } 
};

但是这并不工作 - 我不能再移动节点和他们被困在右上角

来源

2014-05-20 SuperUser01

你没有将'tick（）'设置为强制布局的“tick”事件处理程序。 –

谢谢，我补充道：force.nodes（d3.values（nodes））。links（links）.on（“tick”，tick）.start（）; ......但是这些界限看起来似乎不起作用。节点在盒子的边界后面飞行。 – SuperUser01

（我想达到这样的http://mbostock.github.io/d3/talk/20110921/bounding.html） – SuperUser01

我发现它是如何去。如果有人想一个边框添加到该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 + ")"; 
    //} 
};

来源

2014-05-21 16:19:08 SuperUser01

D3力导向布局：边框

回答

相关问题