问题标签 [d3-force-directed]

我正在尝试这个包中的 3d Force Graph，我正在寻找影响节点之间结合强度的方法。链接宽度或长度都很好，但我在 API 中看不到任何允许我控制或影响的东西。传递链接强度的正确字段是什么Graph，每个链接一个？

我有一个 d3 force sim，如果我要添加节点，如下所示：

一切正常 - 圆圈被添加到正确的位置，呈现的 html 如下所示：

JSfiddle 示例

但如果我想添加组（我的最终设计需要背景图像、标签和各种其他东西），如下所示：

尽管我的代码似乎得到了正确解释（我附加了组，将图像和标签附加到它们），但这些组保持静态，并且它们彼此重叠地保持在 sim 的中间。此外，似乎坐标变换是转到图像而不是组，这就是我认为破坏模拟的原因：

JSfiddle 示例

我非常肯定组的使用会搞砸一切，但我无法理解如何正确使用它们。

感谢任何帮助。

这是片段形式的完整布局：

我有这个 plunker ( https://next.plnkr.co/edit/17t5ujwC71IK3PCi )，它显示了基于组 ID 分组在一起的节点的 d3 图。图表看起来很好，但我需要确保这些组永远不会相互重叠（如下所示，橙色、蓝色和浅蓝色是不同的组，但它们出现在彼此之上）。

拖动它们会导致图表无休止地移动（这是另一个问题），并且并不总是能解决重叠问题。我看到了另一个例子（http://bl.ocks.org/GerHobbelt/3071239），它好一点，但它是用 d3.v2 制作的。它在每个组之间有相当大的空间，这使得分析更容易。

我认为设置charge为负值会起到神奇的作用，但将其设置为.force('charge', d3.forceManyBody().strength(-30))根本没有帮助。

问题：

现在，尝试通过编写类似于我上面提到的 d3.v2 示例的代码来使组远离，但很难为我的 d3.v4 烹饪类似的东西。关于如何动态地使所有组彼此远离有什么好的建议吗？

我是 d3.js 的新手。我试图创建一个具有 5 个节点的静态架构，并根据偏好将它们相互链接，节点应该像这样组织：

一开始我设置节点的位置，然后创建链接。但是，当节点链接时，架构会发生变化，结果如下所示：

这是我的代码：

请你帮助我好吗？先感谢您。

我需要帮助修复 D3 力模拟节点和链接，我有 2 个问题，请你帮我找到正确的方向吗？

问题1：节点数组中的重复不会复制流量，请参见下图，有2个“哺乳动物”节点和4个哺乳动物连接的哺乳动物，我该如何实现？

http://jsfiddle.net/3hL48pxg/3/

问题2：当链接的来源与节点不匹配时，会抛出错误，如何避免错误？

http://jsfiddle.net/3hL48pxg/5/

提前致谢！

我有一个 d3 模拟，它根据算法计算的属性对节点进行分组。在该算法的多次迭代中，我希望能够在某些组周围显示一个“集群区域”，最好是在算法仍在运行时聚合碰撞节点。因此，与其采用这种在碰撞时删除节点的方法，是否可以汇总碰撞节点的计数？并且可能以不同于该块中提到的方式（对于数百个数据节点似乎计算成本很高）？我查看了 d3-force 的文档，但找不到任何内容。

谢谢！

我正在密切关注将 D3 与此处给出的 React 相结合的方法。

通过这种模式，结构和渲染由 React 完成，计算由 d3 处理。

此代码段用于在两个节点之间绘制边（链接）。我是 d3 的新手，所以我想知道如何添加一个箭头来指示两个节点之间的源-> 目标关系？该箭头应该在目标节点旁边。

这个问题基于Move d3 circles away from center circle - force layout当节点 N1 的大小发生变化并且我在节点上运行模拟时，N1 周围的节点将以相同的角度移开，但我在这里遇到的问题是当它的大小变回原来的时候，让节点更靠近 N1。我怎样才能做到这一点？

我在下面使用过，但节点没有靠近

另外，如果我尝试使用力模拟，那么其他节点的位置会完全改变，请在此处查看视频http://recordit.co/797i1E8ocT

提前致谢。

我正在使用 d3 的强制布局，并希望在事件触发器上移动节点。

我在这里创建了一个显示所需功能的最小块。

如您所见，当单击按钮时，节点迅速移动到它们的新位置。我想放慢速度。我已经使用了文档中指定的（我认为是）相关属性的组合（例如alpha, alphaDecay, velocityDecay），但无济于事。

回顾一下：如何让节点在位置更新时移动得更慢？

谢谢！

我从以下链接下载了代码

https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb

我从下载主题

https://github.com/akveo/ngx-admin

我设法使用 angular v6 将两者集成到单个项目中。现在我创建了我的新组件并使用了来自媒体站点的图形组件。我已将属性添加到节点中，显示为“性别”，显示 M 或 F。现在我在屏幕右侧有一个面板，如果单击男性复选框，性别 M 的节点应突出显示，如果选择 F，则突出显示女性节点和反向以取消选中复选框。

仪表板组件.ts：

仪表板组件.html

仪表板组件.scss

目前，有时它有效，但并不一致。也许我错过了一些东西。我怎么能弄清楚这个？