javascript - 节点之间的链路长度不可预测-6ren

javascript - 节点之间的链路长度不可预测

转载作者：行者123 更新时间：2023-12-03 08:02:40

在我的 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">

最佳答案

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

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

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

关于javascript - 节点之间的链路长度不可预测，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34526372/

文章推荐： javascript - 语法错误: symbol "%" not allowed in string

文章推荐： haskell - 模式 x * y 中的解析错误(case 语句)

文章推荐： javascript - 如何正确检查并查看 jQuery 代码的结果？

javascript - 主干网、路由、链路
对我来说遇到了一个棘手的问题......基于主干的路由 Controller 和期望的效果没有实现。我需要仅根据 URL 的第一部分获取 URL，并根据任何一种可能性定向到路线。 JS routes
udp - 哪种流量将主导 Internet 链路、弹性流量或非弹性流量？
假设链路上同时存在弹性流量和非弹性流量(如图所示)。那么它们中的哪一个将主导链路(弹性或非弹性)。根据我的说法，这应该取决于如果非弹性流量作为弹性流量可以调整流量，那么流量可以根据它进行调整。所以任何

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 节点之间的链路长度不可预测