问题标签 [d3-force-directed]

我目前已经开始使用 d3.js。如何对节点进行分组以在力有向图中给出不同的颜色？例如：父节点为红色，子节点为蓝色。

我希望我的力导向布局中的一些节点忽略所有力并根据节点的属性保持在固定位置，同时仍然能够被拖动并对其他节点施加排斥并保持它们的链接线。

我认为它会像这样简单：

我还尝试在每个刻度上手动设置节点的 x 和 y 属性，但是如果节点受到力的影响，链接会继续浮动到节点所在的位置。

显然，我对这应该如何工作有一个基本的误解。如何将节点固定在某个位置，同时保持链接并仍然允许它们可拖动？

如何在以下d3 强制有向图中将节点更改为矩形而不是圆形？

我计划为动态创建的数据集的节点创建树状结构，并希望为力有向图设置所有节点的 y 轴坐标。换句话说，我希望节点位于级别中（如树结构），而节点可以在 x 轴上自由移动和优化自身。

最终结果应该是一棵树，其中节点位于分配的级别，而不是默认情况下的径向。兄弟链接不应重叠，并且尽可能短（逻辑分组，因此希望通过力图做到这一点）。
如果有人有比这更简单的解决方案，那么我会全力以赴。

代码提取：

这可能是另一个关于改进的问题，我在 的帮助下做了一个指令，Existing question效果很好。

现在当用户动态创建这个图表时，当数据负载超过时，浏览器变得沉重，用户界面卡住了。

最初加载图表时，如何将节点级别限制为 2 。我试图一一拨打服务电话，但这不起作用。

这是代码：

Application with Data

我正在尝试仅将平移（暂时不想缩放）添加到我的 D3 力导向图形可视化中。无论我尝试什么，我都会收到错误消息 - “无法读取 null 的属性‘翻译’”。我觉得好像我在设置我找到的所有示例中的内容，但有些地方不太对劲。

这是我最近的尝试。据我所知，相关代码应该在我定义 svg 的顶部，但我包括了其余部分，以防有什么我不知道的影响它。

如何制作使用 force() 布局的基本连接图（例如两个或多个节点以及连接它们的链接）？我只想能够拖动一个节点并调整链接以在拖动节点时保持连接。我还想要 force() 和双击处理的充电或定位功能。本质上我希望每个节点都是“粘性的”。节点仅在被拖动时才会移动。

但是有没有一种简单的方法可以做到这一点？就像这个显示节点和链接的示例一样 -

http://djalmaweb.hyperphp.com/wordpress/time-graph-lines/image/

在某处有一个基本的例子吗？

谢谢

我正在尝试在力有向图上实现标记边缘。

我使用的例子可以在这里找到。

示例中的相关代码位在此处给出。

我的代码如下：

数据如下：

不幸的是，图表上的标签不可见。

最终目标是在每条边上显示相应的值“值”。

你能告诉我我做错了什么吗？

感谢您的时间。

更新

通过涂底液成功地将标签添加到边缘

为了

但是，问题仍然存在：如何添加“值”数据而不是标签“标签 i”？此外，它们在鼠标悬停时的外观如何实现？

更新二

通过为边缘标签的 textPath 定义 .data(graph.links) 然后返回 d.value 来显示“值”数据。你能告诉我鼠标悬停是如何实现的吗？如果每条边的“值”数据只能在悬停时看到，那就太好了。谢谢！

在 d3 中使用强制导向布局，如何使链接距离成为优先事项，同时仍保持良好的图形布局？

如果我指定动态链接距离，但保留默认费用，我的图形距离会被费用函数变形，不再是准确的距离：

但是，如果我移除费用，图表将如下所示：

任何建议表示赞赏！

首先：d3版本："version": "3.5.17"

我有两种不同的专题地图，一个比例符号地图和一个伪德默斯地图，其符号（圆圈，与比例符号相同）尽可能接近其原点，并带有碰撞检测和重力。

但是，我想将比例符号地图中的圆圈设置为制图。特别是，我只想触发我的力导向图以进行碰撞检测和重力；这是第一次正常工作。我提供了一个从制图返回到比例符号地图的动画，其中每个符号只是移回其质心。现在，如果我想回到制图，代码会失败并且它说Uncaught TypeError: Cannot read property '1' of undefined，即使我在第一次触发它的同时再次触发它。这是部队可重用性的某种错误吗？还是我这边的某种错误？

问题可以在这里测试：https ://particles-masterthesis.github.io/aggregation/ ；在左上角，您可以在比例符号和图表之间切换。

我正在使用的适当代码如下： case 'psm_cartogram': let psm = this.currentViz; information = { data: psm.nodes, symbols: psm.symbols }; upcomingViz.obj = this.canvas.drawCartogram( null, this.currentViz.constructor.name === "Cartogram", information, () => { this.currentViz.hide(false, true); this.fadeOutParticles(); } ); upcomingViz.type = 'cartogram'; resolve(upcomingViz); break;

关键部分在information对象中，我在地图和比例符号地图之间共享相同的对象

在图表中，我有以下重要代码：

``` this.force = this.baseMap._d3.layout.force() .charge(0) .gravity(0) .size([this.width - this.symbolPadding, this.height - this.symbolPadding]);

...

```

如果有任何帮助，代码也可以在https://github.com/particles-masterthesis/aggregation/src/js/visualization/map获得。主要代码是过渡管理器和两种类型的地图。

我很感谢我能得到的任何建议和支持，即使它只是一个简单的提示，我可以检查一下。

PS：

这是两张截图；第一个对于不同的日志很重要，在执行任何重力等之前，cartogram:132它是-function 中console.log(this.node)的 a，第二个提到了错误。tick

为了更多地理解第一个日志：它从登录this.nodetick 函数开始；之后，触发了对 psm 的可视化更改（cartogram_psm），稍后更改回制图，然后出现错误。