Question

在我的D3力布局中，当我动态添加圆圈和链接时，链接的长度有时会增加到无穷大。添加更多节点后，它会自动得到纠正。

代码是

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<script src="d3.min.js"></script>

<script>


  // var in1=prompt("Name");
  // var in2=prompt("Name");

var n= new Array();
var l=new Array();

var n=[];
var l=[];



  function show()
  {


var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);


d3.select("svg").remove();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);






  force
      .nodes(n)
      .links(l)
      .start();

  var link = svg.selectAll(".link")
      .data(l)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(n)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);




  node.append("title")
      .text(function(d) { return d.name; });


  force.on("tick", function() {
    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; });

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




}




function add()
{
  try{


  var add_name=prompt("name","Name"); 
  var add_group=parseInt(prompt("group","0"));

   n.push({"name":add_name,"group":add_group});

   if(n.length>1)
   {
  var add_source=parseInt(prompt("source","0"));
  var add_target=parseInt(prompt("target","0"));
  var add_value=parseInt(prompt("value","0"));



  l.push({"source":add_source,"target":add_target,"value":add_value});

  console.log(n);
  console.log(l);
  }

  show();
}


catch(e)
{
  console.log(e);
}


}



</script>

<body onload="show();">
<input type="button" onclick="add();" value="dd">

Answer 1

我认为问题是您在模拟仍在进行时向布局添加节点。如果我添加了一个节点并快速添加另一个节点，我就能够重现这个问题。

一种可能性是通过调用force layout's stop() method在add()功能期间停止布局。您需要在force函数之外声明show()变量，方法与声明节点列表n和链接l的方式相同。

另一种可能更好的方法只是创建一次力布局。此时，您在页面加载时创建一个强制布局，并为添加的每个附加节点创建一个附加强制布局。当您更新节点和链接列表时，如果它们仍然被旧版本使用，则会出现问题。强制布局在后台运行。如果只创建了一个强制布局，则您不应该停止它：只需调用其start()方法，即可在修改数据后重新初始化自身它正在流失。

节点之间不可预测的链接长度

1 个答案: