问题标签 [d3-force-directed]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
84 浏览

d3.js - D3 v3 与画布上的 d3-force 模块

所以我是 D3 的新手,面临一个棘手的问题:

我有一个旧的 D3 V3 实现(带画布),其中的刻度函数看起来像这样。

我添加了新的 d3-force 模块,这样我就可以使用新的部队了…… 本质上,我想将 d3 v3 与新的 d3-force 模块一起使用

在这种情况下,我将如何更改刻度以执行以下操作:

基本上我希望网络在达到平衡后冷却/停止移动(如果这有意义的话)

0 投票
0 回答
156 浏览

javascript - 更新圆圈属性时d3.js数据未更新

我正在使用 d3 强制布局。我必须根据我拥有的数据显示节点和节点之间的链接。我正在使用数据设置圆的属性 cx 和 cy。圆圈显示在正确的坐标处,但节点数据中的 dx 和 dy 未更新。在刻度函数中,源和目标具有相同的坐标。所以,我无法在两个节点之间画一条线。

0 投票
1 回答
665 浏览

d3.js - D3v4:力有向图的圆圈中缺少文本

我正在使用 d3 进行简单的可视化以绘制力导向图。我从https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048的代码开发,我还添加了一个标记。但是,我正在努力在每个节点下绘制文本。代码如下:

输出返回文本,但不显示。关于我做错了什么有什么想法吗?

非常感谢!

0 投票
2 回答
4207 浏览

javascript - d3js Force Directed Graph - 单击节点以弹出从 JSON 读取的信息框

我一直在使用Force-Directed Graph,但我还是 D3js 和 Javascript 的新手。

我希望能够单击页面上的节点和信息框弹出窗口并打印有关该节点的一些信息(来自 JSON)。

我的 json 文件示例:

所以当我点击一个节点时。它应该弹出如下内容:

我的图形代码很像我上面链接的强制导向的例子。

0 投票
0 回答
159 浏览

javascript - 在 d3 v4 中改变节点颜色在画布上强制有向图

我正在使用 d3v4 和 html 画布制作一个力导向图。我已经成功地让节点动态更新,这样当你将一个节点拖到中心时,它会改变它的外观,那些通过链接直接相关的节点也会改变。但是,虽然我可以成功更改节点的大小,但我无法更改颜色。我怀疑这是由于缺乏对 HTML 画布的理解。这是我绘制节点的代码:

节点不是根据它们是否是中心的、相关的或两者都没有被着色,它似乎是随意地给它们着色,有时一次全部变成红色或全部变成灰色。然而,半径完美地工作,所以我知道动态属性(中心,相关)设置正确并且被函数识别。我错过了什么?

0 投票
1 回答
663 浏览

javascript - 将 d3-force-3d 计算插入 3-D 图形渲染器

我是一个 threejs 菜鸟,我的用例要求我以 3D 形式呈现力有向图。我正在使用 d3-force-3d 来计算图形节点上的所有力。但是,我找不到任何将这些计算考虑在内并为其创建 3 维图的库。

我只能找到一个在 3D 中制作力有向图的库,即3d-force-graph,但它不允许您编辑力,这是我需要的。

是否有直接插入 d3 计算并呈现 3D 图的库?

0 投票
1 回答
99 浏览

javascript - 解释 Mike Bostock 节点解析循环

我对 JavaScript 和 d3 比较陌生,但我对强制导向的布局非常感兴趣。在 Mike Bostock 的力导向可视化中,他倾向于使用以下代码(或类似代码)从链接列表中解析节点:

我完全理解他在这里最终完成了什么,我只是想forEach更好地理解循环中的 JavaScript 语法(实际上,完全没有)。如果有人可以解释,我将非常感激。

这显然是非常优雅的代码,但我在互联网上的任何地方都找不到解释——我可能在搜索中遗漏了一个关键术语,所以我很不情愿地在这里问这个问题。真正让我失望的是:

  • 两边的两个任务是||做什么的,
  • 每行的第一次分配的顺序(每行的左侧||):例如,为什么link.source = nodes[link.source]不是nodes[link.source] = link.source
0 投票
1 回答
2690 浏览

javascript - D3 v3 Force Layout - 优雅地添加/删除节点而不刷新

设想:

我从在线示例中获取的标准 D3 v3 强制布局开始。

我想加强这一点,我的目标是:

  1. 当脚本加载调用一个函数来初始化和渲染一些数据的图形
  2. 单击按钮以更新页面上的图形以优雅地添加/删除节点和链接- 即无需完全重新绘制节点“飞入”。

我想要的行为类型的一个示例是这个奇妙的图表,其中拖动阈值滑块“弹出”链接进/出而无需完全重新渲染,因此很容易看到已添加/删除的内容:http://jsfiddle。网络/simonraper/TdHgx/?utm_source=website&utm_medium=embed&utm_campaign=TdHgx

问题:

  • 我不确定如何达到上述第 2 点。
  • 我无法通过完全重绘来更新我的图表
  • 我很确定答案与我如何使用 D3 通用更新模式有关。

这是我到目前为止的一个例子:https ://jsfiddle.net/samollason/uvqosxrr/3/

jsfiddle 的代码:


html:

js:

0 投票
1 回答
837 浏览

javascript - D3 强制定向图拖动和缩放功能不起作用

我一直在尝试实现 D3 力有向图函数来为我的数据提供可视化表示,到目前为止,我已经成功地让节点显示在屏幕上并使各个节点可拖动,但是我没有成功让整个网络平移和缩放。

我在网上看了无数的例子,但还没有真正弄清楚我做错了什么。

有人可以指出我正确的方向吗,使用 d3 版本 4

调用此函数的 HTML 文档已实例化了 SVG(因此选择了 SVG,而不是像大多数其他示例一样附加)

“json_nodes”和“json_links”这两个变量从文本文件中获取格式化的节点和链接(就像您在 JSON 文件中看到的那样)并将它们作为数据传递(想离线执行此操作,所以当我去海外时)。数据的格式如下:

节点:[{“id”:“名称”,“组”:整数},...],

链接:[{“源”:“名称”,“目标”:“名称”,“值”:整数},...]

如果这是一个重复的问题,我深表歉意,我无法找到任何真正直观的帮助。

0 投票
0 回答
292 浏览

javascript - 动态力有向图 d3.js

我正在尝试创建一个动态 d3.js 强制定向图表。我正在使用 generateData 函数创建一些数据,然后每 3 秒使用 updateData 更新这些数据。

初始数据显示良好,但随后我添加的新节点堆叠在 SVG 的左上角,链接完全消失。

希望对 d3.js 更有经验的人可以帮助我。请看下面我的代码。