问题标签 [d3-force-directed]

我正在使用 d3 for npm 创建一个强制图。该图是使用以下内容创建的：

https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721

我正在尝试按如下方式设置测试环境： https ://ericnish.io/blog/how-to-unit-test-react-components-with-enzyme/

问题是当我运行测试时，我不断得到

我在我的图形组件中导入了 d3，如下所示：

好像当我在我的测试文件中导入我的反应组件时，它吓坏了。这是我的测试文件：

我怎样才能摆脱这个错误？

我需要制作具有可拖动功能的“粘性布局”，并尝试在此链接上复制 Mike Bostock 的示例。因为作者在 D3 v3 中编写了该程序，所以我必须将他的代码“升级”到 D3 v4。这意味着必须相应地更改 d3-force 和 d3-drag 语句。虽然原始示例中的逻辑流程很容易理解，但我仍然无法制作自己的版本（参见下面的代码）。问题：经过一定时间（2 - 3 秒）后，节点被拖走，但链接未更新。

我最初的想法集中在拖动函数（.call（drag）），但后来我发现“tick”函数在上述时间后不再运行（我通过在tick中放置一个计数变量得到它函数，然后 console.log 它）。至此，我的脑海里一片空白，无法进一步探索。

问题出在哪里？

我正在尝试制作一个力有向图，其中子节点和孙节点正在环绕/环绕父节点。同时父节点连接到它的子节点，每个子节点连接到它们的每个孙节点。

在视觉上，它看起来像这样：

我已经尝试干预默认的力有向图（在这里和那里），但似乎没有办法像我试图制作的视觉效果那样将它们整齐地排列成圆形/轨道。

我尝试查找轨道代码，但似乎需要一种完全不同的方法。

这是我的小提琴和代码：https ://jsfiddle.net/znqkcLhs/

有任何想法吗？

突然发生这种情况时，我正在整理文件夹结构（将 JS 移动到.js文件而不是内联，并将其放入自己的文件夹）。我的力导向图突然出现了这个奇怪的问题。所有节点和链接都移到了屏幕的左上角。它看起来像这样：

Javascript 控制台显示Cannot create property 'vx' on string 'dki'.

奇怪的是，当我尝试将整个代码粘贴到 jsfiddle 中时，它照常工作。你可以在这里找到小提琴：https ://jsfiddle.net/k6pf1hfw/1/

这是JS代码：

我找不到代码有什么问题。我已尝试恢复我的操作（将文件移回其初始位置）但没有任何变化。还是那样。

这有什么问题？这让我抓狂。

我有这样的数据：

我一直在尝试根据将valuenode 作为其target.

因此，例如，节点 B 的大小应根据 276 的值（以节点 B 作为其目标的链接）。

这是我使用的：

但这似乎不起作用。说它不认识我从这里拿走的link.filter东西。我正在使用 d3.js v4。

试图寻找线索，但仍然没有任何线索。有任何想法吗？

当我将一个节点拖到另一点时，我希望我的力导向图保持冷静。目前，将一个小节点拖离中心很远会导致整个图形不受控制地摇晃。这可能是一团糟，因为节点很多（超过 100 个）......

这是描述问题的简短视频：https ://gfycat.com/GleamingMellowHypacrosaurus

我知道设置所有节点坐标的方法，但是不可能，因为节点太多，以后可能会增加。

这是我的代码：

有没有办法在 D3 力导向图中禁用动画？

我正在处理这个例子：https ://bl.ocks.org/mbostock/4062045

我想在没有初始动画的情况下渲染图形，即显示所有节点和链接的最终位置。

我已经构建了一个使用 D3.js V4 动态加载数百个（有时数千个）节点的图表。尽管我试图调整它的力量，但有一些节点集群可能会变得不那么混乱，但因此排斥力会将没有边缘的节点推到画布的边界。

似乎没有简单的方法来设置没有边缘的单个节点倾向于离中心更近的距离

以下是截图（注意右上角的节点）：

以下是涉及的力量：

期待有其他方法来调整或优化特别不边缘的节点......

我正在使用带有可折叠节点的 D3 力有向图，如此处所述

有没有办法避免最初加载图表时发生的爆炸？此外，一旦图表加载，我们可以停止节点的移动/动画吗？

我正在使用 d3 生成基于此示例的力有向图：Force-directed graph example in d3

我正在结合 React 来实现这个，其中 d3 强制有向图，reactjs 呈现可视化。

现在我想根据分配给它们的组来设置节点的样式（颜色）。这是我的节点数据：

在这个例子中，除了没有 reactjs 之外，它们实际上做的是完全相同的事情。但是，我找不到与 reactjs 结合使用的任何明确方法。