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

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

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

26

4

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

26

4

0

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

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

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

python - 不可 JSON 序列化的项目的管道
我正在尝试将抓取的 xml 输出写入 json。由于项目不可序列化，抓取失败。从这个问题来看，它建议您需要构建一个管道，未提供的答案超出了问题 SO scrapy serializer 的范围。所
c++ - 参数的重载函数(不可)在编译时推导
有没有一种方法可以通过重载函数来区分参数是在编译时可评估还是仅在运行时可评估？假设我有以下功能: std::string lookup(int x) { return table::va
wpf - 为什么 CompositeCollection 不可 Freezable？
我正在使用 MVVM 模式编写一个应用程序。我通过将 View 的 DataContext 属性设置为 ViewModel 的实例来向 View 提供数据。一般来说，我只是从那里使用 Binding
python - 字节串怎样才能很好的存储呢？ - 不可 JSON 序列化 -
对于一个项目，我正在使用带有简单 python module 的传感器收集多个红外命令。 . 我收到如下字节字符串: commando1= b'7g4770CQfwCTVT9bQDAzVEBMagGR
python - Decimal 不可 JSON 序列化
我有一个计算方法，可以在用户使用 Cartridge 作为我的商店框架结账时计算税费。税 = 税 * 小数(str(settings.SHOP_DEFAULT_TAX_RATE)) 计算工作正常。然
python - pickle 不可 pickle 的对象
我正在用 pygame 制作一个绘图程序，我想在其中为用户提供一个选项来保存程序的确切状态，然后在稍后重新加载它。在这一点上，我保存了我的全局字典的副本，然后遍历， pickle 每个对象。 pyga
c++ - 使类不可复制*和*不可 move
在 C++11 之前，我可以使用它来使类不可复制: private: MyClass(const MyClass&); MyClass& operator=(const MyClass&); 使用 C
c++ - LinearHashTable iter 不可取消引用且 iter 不可
大家好 :) 我在我的 VC++ 项目中使用 1.5.4-all (2014-10-22)(适用于 x86 平台的 Microsoft Visual C++ 编译器 18.00.21005.1)。我
python - TypeError : array([ 0.]) 不可 JSON 序列化
我有一个 python 文件:analysis.py: def svm_analyze_AHE(file_name): # obtain abp file testdata = pd.
python - 不可 JSON 序列化 - Python + Flask + Sqlalchemy
这个问题已经有答案了: How to serialize SqlAlchemy result to JSON? (37 个回答) 已关闭 4 年前。我正在编写小查询来从 mysql 获取数据数据库，
python - TypeError : {1, 3} 不可 JSON 序列化
我是 Python 初学者，我在 JSON 方面遇到了一些问题。在我正在使用的教程中有两个函数: def read_json(filename): data = [] if os.pa
javascript - 如何使 HTML 元素在 iPad 上**不可**旋转？
我目前正在开发一个针对 iPad 的基于 HTML5 Canvas/JavaScript 的小型绘图应用程序。它在 Safari 中运行。到目前为止，除了一件事之外，一切都进展顺利。如果我旋转设备，
c++ - 不可 move -不可复制对象的 vector 的 move 分配不编译
以下代码无法使用 Visual Studio 2013 编译: #include struct X { X() = default; X(const X&) = delete;
python - TypeError : array( ['cycling' ], dtype=object) 不可 JSON 序列化
嗨，我制作了一个文本分类分类器，我在其中使用了它，它返回一个数组，我想返回 jsonresponse，但最后一行代码给我错误 'array(['cycling'], dtype =object) 不可
python - TypeError : sqlalchemy. orm.attributes.InstrumentedAttribute 对象位于 0x7f86789f9bf8 不可 JSON 序列化
我使用 Flask 和 Flask-Login 进行用户身份验证。 Flask-Sqlalchemy 将这些模型存储在 sqlite 数据库中: ROLE_USER = 0 ROLE_ADMIN =
python - 如何将 Python 对象(不可 JSON 序列化)从一个 (AWS) lambda 函数传递到另一个？
如果您尝试发送不可 JSON 序列化的对象(列表、字典、整数等以外的任何对象)，您会收到以下错误消息: "errorMessage": "Object of type set is not JSON
c++ - 如果 T 不可 move ，则 std::vector 是否可 move ？
我在尝试 move std::vector 时遇到崩溃其中 T显然是不可 move 的(没有定义 move 构造函数/赋值运算符，它包含内部指针) 但为什么 vector 的 move 函数要调用 T
python - jwt.encode 失败，显示 "Object of type ' 字节“不可 JSON 序列化”
我尝试在用户成功登录后将 token 返回给他们，但不断收到以下错误: 类型错误:“字节”类型的对象不可 JSON 序列化我该如何解决这个问题？这是我到目前为止的代码: if user:

首页

博学

6Ren·AI

商城

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