问题标签 [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 回答
188 浏览

javascript - 无法在可折叠的力有向图 d3.js 中输入文本

你好,亲爱的 Stackoverflow 社区,我的力导向图已经走了很长一段路,我真的很喜欢这个项目。然而,在节点上输入文本元素时,我总是失败。请找到附上的两张图片,一张是我当前的节点,一张是我想要的标签。

在此处输入图像描述

在此处输入图像描述 资料来源:https ://bl.ocks.org/mbostock/1093130

您会在下面找到我想要包含的代码片段:

我在上面测试过代码的区域添加了 //text 注释。

我在 svg.selectAll & .append("circle") 中尝试了一个组元素。然而,这打破了视觉。我错过了什么?感谢您的支持,周末愉快!

0 投票
2 回答
171 浏览

javascript - 使用 D3 力模拟作为纯函数

我使用 d3-force 进行碰撞检测:

我不希望图表被动画化,所以我只是在 300 个滴答声后得到节点的最终状态。

nodesWithXY但是,如果我可以再次运行模拟(使用相同的)并获得相同的结果,那就太好了。这将使它更容易在反应中使用。

这可能吗?例如,通过运行更多迭代或调整 alpa 和衰减值?

0 投票
1 回答
83 浏览

javascript - 使用 Filesaver.js 的 D3JS 图形无法导出 Font Awesome 图标

D3JS用来创建一个力有向图,并用字体真棒图标替换了节点。一切正常,直到我尝试将其转换为 blob 并使用filesaver.js.

这是我用来创建力有向图的代码: https ://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8

这是我用来将我的 SVG 图转换为 blob 的代码:http: //bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177

这是我用字体真棒图标替换圆形节点的代码部分:

我希望图像输出与上面的力导向图相同,但使用字体真棒图标而不是圆形节点。

0 投票
1 回答
88 浏览

javascript - D3 鼠标悬停返回名称

嗨,我对 d3 很陌生,我正在尝试在制作图表时在悬停/鼠标悬停上添加文本。任何人都可以建议一种实现它的方法吗?我尝试了许多选项,例如创建一个 div 变量来选择 div id、将标题附加到圆圈并提供文本,但到目前为止没有任何效果。

这是我的js代码:

数据如下所示:

提前致谢!

0 投票
0 回答
23 浏览

d3.js - MS Edge 不在 3D 力有向图中渲染线条

我有一个使用 D3.js 制作的力导向图。在 Firefox、Chrome 和 Opera 中,一切都很好。我的问题是 MS Edge(Win10,版本 44.17763.1.0)不绘制边缘和线条,这是唯一的缺陷 - 否则一切正常(文本、节点、箭头、移动、缩放等)。

事件这样一个简单的代码(如下)不起作用 - 未绘制红线:

这是示例:https ://jsfiddle.net/svorad/jc0pa8dz/1/

我已经尝试了我能想到的一切。有任何想法吗?

0 投票
1 回答
349 浏览

javascript - 如何实现 D3js 强制有向图中节点的高亮和过渡效果?

我正在尝试在 D3 js 强制有向图中的节点上实现高亮效果。

这样做时我面临以下问题。

高光效果:a。在选定节点的鼠标悬停时,我正在更改其相邻节点的颜色。但是其他节点的颜色不应该改变(在我的情况下,它变成红色并且不知道如何修复它)如何解决这个问题?湾。在选定节点的鼠标悬停时,我想通过增加它的半径来为所有互连节点添加过渡效果。其他节点也应该淡出,这可能吗?

请参考工作 js fiddle 以供参考: 在此处输入链接描述

0 投票
1 回答
41 浏览

javascript - 如何更改 d3JS 强制有向图中所有突出显示的节点的颜色?

现有功能:

当鼠标悬停在任何节点上时,所有连接的节点都将突出显示。

预期输出:

当鼠标悬停在任何节点上时,所有连接的节点都被突出显示但是突出显示的节点应该是相同的颜色,并且在鼠标移出时返回到以前的状态。

我正在尝试实现此功能,但它没有按预期工作。

请在此处参考工作代码片段: jsfiddle

0 投票
0 回答
84 浏览

performance - 在 canvas.scale 调用后 D3 强制布局(Canvas)性能下降

我遇到了非常奇怪的性能问题。. . 我使用 d3 力图可视化网络中的一些关系,为了实现缩放,我使用 d3-zoom。当 d3.zoomIdentity.k > 1 时,性能会显着下降,我不知道为什么!:( Chrome 性能配置文件截图

正如您在性能配置文件的屏幕截图中看到的那样,在滚动(紫线)(放大,k 变为> 1)之后,帧渲染时间和任务(灰线)时间立即增加。

您可以像这样重现它: 1. 打开 Index.html 2. 拖动一些节点并检查 fps(视觉) 3. 放大,现在你可以看到病态的性能下降 4. 缩小,一切都很好 :shrug:

这是代码(index.html):

0 投票
1 回答
1423 浏览

javascript - 如何更改节点的不透明度?

设想:

在将鼠标悬停在特定节点上时,我试图通过更改不透明度来突出显示该节点及其所有互连节点,并且所有其他节点都应该模糊。

期望:鼠标悬停在节点上时,该节点及其所有互连节点的不透明度应为 1,而其他节点应使用较小的不透明度进行模糊。

现有功能:当我第一次将鼠标悬停在任何节点上时,它无法按预期工作。但从第二次开始它工作正常。

请参考 jsfiddle:jsfiddle

0 投票
1 回答
77 浏览

javascript - 如何创建将节点约束到 SVG 中特定区域的自定义力?

我正在创建一个力导向布局,我想将一系列圆圈分成三个不同的组。然后每个组都有一个相应的中心点。

在此处输入图像描述

到目前为止,一切都很好。现在我想将每组中的圆圈限制为一种边界框。请看下图。

在此处输入图像描述

我认为要走的路是使用自定义力量。这是我需要一些帮助的地方。有没有人能够做到这一点?

这是我到目前为止所拥有的: