javascript - 力模拟为新节点生成 NaN 坐标-6ren

javascript - 力模拟为新节点生成 NaN 坐标

转载作者：行者123 更新时间：2023-11-30 11:25:15

26

4

我是 D3.js 框架的新手，正在寻求帮助。我正在尝试使用简单的力模拟来绘制网络。我希望每秒添加一个新节点并加入模拟。

下面是我的尝试。我用两个节点启动 sim，它们运行良好。但是，当我添加第三个节点时，模拟会为其 x 和 y 坐标分配 NaN 值。

HTML:

<head>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
  <svg width="300" height="300"></svg>
</body>

Javascript:

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');

// Test Data
const nodes = [ {}, {} ];

setTimeout(() => {
  nodes.push({});
  redraw();
}, 2000);

const ticked = () => {
  svg.selectAll('g.node')
    .attr('transform', d => {
      if (isNaN(d.x) || isNaN(d.y)) {
        console.error('nan!!!');
        d.x = 50;
        d.y = 50;
      }

      return `translate(${d.x},${d.y})`;
    });
};

const simulation = d3.forceSimulation()
  .force('repulsion', d3.forceManyBody().strength(-30))
  .force('pin_y_to_center', d3.forceY().y(d => height / 2).strength(0.1))
  .force('pin_x_to_center', d3.forceX().x(d => width / 2).strength(0.1));

simulation.nodes(nodes);
simulation.on('tick', ticked);

const redraw = () => {
  const node = svg
    .selectAll('.node')
    .data(nodes)
    .enter().append('g');

  node.attr('class', 'node')
    .append('circle')
      .attr('r', 5);
};

redraw();

最佳答案

你必须将数组传递给模拟...

simulation.nodes(nodes);

... 在 redraw 函数中。

这是您的代码，仅进行了更改:

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');

// Test Data
const nodes = [{}, {}];

setTimeout(() => {
  nodes.push({});
  redraw();
}, 2000);

const ticked = () => {
  svg.selectAll('g.node')
    .attr('transform', d => {
      if (isNaN(d.x) || isNaN(d.y)) {
        console.error('nan!!!');
        d.x = 50;
        d.y = 50;
      }

      return `translate(${d.x},${d.y})`;
    });
};

const simulation = d3.forceSimulation()
  .force('repulsion', d3.forceManyBody().strength(-30))
  .force('pin_y_to_center', d3.forceY().y(d => height / 2).strength(0.1))
  .force('pin_x_to_center', d3.forceX().x(d => width / 2).strength(0.1));

simulation.on('tick', ticked);

const redraw = () => {
  simulation.nodes(nodes);
  const node = svg
    .selectAll('.node')
    .data(nodes)
    .enter().append('g');

  node.attr('class', 'node')
    .append('circle')
    .attr('r', 5);
};

redraw();

<script src="https://d3js.org/d3.v4.js"></script>
<svg width="300" height="300"></svg>

此外，考虑在添加新节点后重新加热模拟。

关于javascript - 力模拟为新节点生成 NaN 坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48301978/

26

4

0

文章推荐： javascript - 使用 jQuery 迭代 HTML 表行并更改列值

文章推荐： arrays - Array.append 更改之前添加的值 - swift 4.0

文章推荐： ios - 以编程方式创建 UICollectionView(在 UIViewController 之外)

javascript - (NaN != NaN) 和 (NaN !== NaN) 有什么区别？
首先我想说的是，我知道isNaN()和 Number.isNaN()工作。我正在阅读 David Flanagan 的 The Definite Guide，他举例说明了如何检查值是否为 NaN :
javascript - 如何摆脱 NaN/NaN/NaN
在表中，对于 skips day 列，最后一行的默认值始终是单词“last”，它不是数字。现在，结果日期显示为“NaN/NaN/NaN”，有什么方法可以将其替换为 Nil 之类的东西。非常感谢。
Javascript 获取 NaN :NaN:NaN
我正在制作一个网站，如果用户登录，则会为用户提供一定的注销时间，其中定义了注销时间，剩余时间是从注销时间 - 服务器时间获得的。我已经通过 PHP 获得了注销时间和服务器时间，但我想动态显示剩余时间
ios - 什么可能导致此 "Fatal Exception: CALayerInvalidGeometry CALayer bounds contains NaN: [nan nan; nan nan]"崩溃？
我有以下代码，它简单地初始化一个 UIImageView 以适应 UIImage 在当前屏幕尺寸上尽可能大的比例: CGSize mainScreenSize = [appDelegate mainS
python - 为什么 (nan,)==(nan,) 为 True，而 nan==nan 为 False？
这个问题已经有答案了: Why in numpy `nan == nan` is False while nan in [nan] is True? (1 个回答) 已关闭 3 年前。我只是觉得这有
javascript - 将 JqGrid 列模式显示为日期和超链接显示 NAN/NAN/NAN
我有动态 JQGrid，其中一列是日期列。我从包含 URL 和日期的 feed 中获取数据。我需要为“日期列”开发列模型，使其显示日期和超链接。但不幸的是，数据显示为 NAN/NAN/NAN (这可
java - map(NaN) 返回 NaN 但我无法调试 NaN
我已经包含了一个演示我的问题的片段。基本上处理给了我这个错误: 调用map(NaN, -3, 3, -125, 125)，返回NaN(不是数字) 我理解此消息的方式是，map 函数返回 NaN，并且由
javascript - 过滤日期在 AngularJS 中返回 NaN-NaN-NaN
我在下面创建的过滤器适用于 Chrome，但不适用于 Firefox。我不明白为什么。 myApp.filter('dateCustom', [ '$filter', function ($fil
python - 为什么在 numpy `nan == nan` 中为 False 而 [nan] 中的 nan 为 True？
虽然问题的第一部分(在标题中)之前已经回答过几次(即 Why is NaN not equal to NaN? )，但我不明白为什么第二部分会以它的方式工作(受此启发问题 How to Check l
c# - 如何使用泛型测试 NaN(或者为什么 NaN.Equals(NaN) == true)？
我需要在数组中找到min和max值(不考虑可能的NaN值在这个数组中)。这只使用 double 会很容易，但是这些 FindMin 和 FindMax 函数必须使用泛型类型。我尝试以这种方式测
ios - 'CALayer 位置包含 NaN : [nan nan]' on UIScrollView
我正在开发一个屏幕，其中 UIScrollView 内只有一个 UIImageView。 UIScrollView 使用户能够固定和缩放图像。我从下面的帖子中得到了帮助。它使用 Storyboard和
ios - Swift:CALayer 边界包含 NaN:[nan nan;南南]？
尽管看到了类似的答案，但我不知道这里发生了什么。我制作了一个自定义的 UIImageview，它应该在创建后立即开始动画: class HeaderAnimator: UIImageView {
python - Pandas :用下一个非 NaN/# 连续 NaN 填充 NaN
我正在寻找一个 pandas 系列并用下一个数值的平均值填充 NaN，其中:average = next numerical value/(# consecutive NaNs + 1) 到目前为止，
javascript - jQuery UI $.datepicker.formatDate 返回 NaN NaN Nan
我有一个 mySql 表，其中有一个名为 posts 的列，该列设置为 timestamp 类型，默认为 current_timestamp。然后，我使用 php PDO 获取它的值(以及其他一些列)
c++ - NAN 差异 - std::nan 与 quiet_NaN() 与宏 NAN
我想知道以下类型的 nan 之间有什么区别。除了 NAN_macro (计算结果为 -nan(ind) 而不是 nan )的视觉差异外，它们的行为似乎都相同(根据下面的示例脚本)。我看了一些其他的答
javascript - 如何解析 NaN :NaN:NaN error in Mozilla Firefox and IE
我为我的网页做了倒计时；它在除 Mozilla 和 IE 之外的所有浏览器上都能正常工作。我做错了什么，我该如何解决？下面是我的代码: ***var dt = '2018-06-14 11:59
ios - 调试 'CALayer position contains NaN: [nan nan]'
在将 Xcode 更新到 8.3 后，我在启动时开始收到此错误:由于未捕获的异常“CALayerInvalidGeometry”而终止应用程序，原因:“CALayer 位置包含 NaN:[nan na
javascript - 如果 Date 为空格式 date() 返回 NaN/NaN/NaN 而不是没有值
我正在使用 jquery 自动完成 onselect 它在不同的文本字段中显示数据。我使用 format_date() 函数在 #dob 和 #anniversery 中显示格式化日期 select:
javascript - IE8 中 Ext JS 网格日期值的 NaN.NaN.NaN 值
我有一个带有 json Store 和 DateField 的网格。 Firefox 运行良好，但在 Internet Explorer 8 中无法运行。我这样定义: function conver
objective-c - 如何解决CALayerInvalidGeometry'，原因: 'CALayer position contains NaN: [nan nan]?
我有一个错误，它在启动时使应用程序崩溃。这是我得到的错误: *** Terminating app due to uncaught exception 'CALayerInvalidGeometry'

首页

博学

6Ren·AI

商城

javascript - 力模拟为新节点生成 NaN 坐标