问题标签 [force-layout]

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 投票
1 回答
24516 浏览

d3.js - 避免 d3.js 圆圈重叠

您可以在这个 bl.ock http://bl.ocks.org/3012590中看到巴黎有很多地理参考点,大圆圈在小圆圈上方:

在此处输入图像描述

我想得到类似于http://vallandingham.me/vis/gates/的东西,这样圆圈就会被它的边界紧紧地附着。

在此处输入图像描述

抱歉,我在这段代码中找不到答案,我错过了一些我认为的东西。

有一个简单的解决办法吗?尝试了不同的负电荷力,如果圆圈大小发生变化会导致问题(如果巴黎的所有圆圈都变小,那么它们就会变得太远)?

0 投票
6 回答
19149 浏览

graphics - d3.js:手动定义强制布局的节点和链接时,“无法读取未定义的属性‘权重’”

我尝试以这种方式同时设置节点和链接:

我有可能没有连接的数据,因此有必要定义节点,以便渲染所有节点。定义流派非常容易。但我收到此错误;

当我注释掉 .links(connections) 时,图形呈现(突出一堆散布在各处的点......)我如何让连接/链接与 d3 合作?

我正在阅读文档,显然源和目标必须是节点数组中节点的索引。有没有办法改变它?那么,我可以使用节点的名称而不是它在数组中的索引吗?

0 投票
1 回答
8279 浏览

d3.js - d3.js:强制布局中的建议节点位置

我想创建一个节点有建议位置的图表,但我也想使用强制布局来确保节点本身不会重叠。这在d3中可能吗?

0 投票
3 回答
27861 浏览

json - 从动态 json 数据更新力有向图上的链接

我是 D3 的新手,正在研究 json 数据是动态的力导向图。我可以在收到新数据后更改力图,但这会产生弹跳效应。创建我的力图的代码是:

当通过再次调用整个函数接收到新的 json 字符串时,我可以创建一个新图形。这将创建一个新图形来代替旧图形。收到值时,我无法使用新值集更新旧图;我图中的节点没有改变,只是它们之间的关系发生了变化。

我确实偶然发现了一个示例(http://bl.ocks.org/1095795),其中删除并重新创建了一个新节点,但实现有点不同。

任何指示或帮助将不胜感激。

0 投票
1 回答
930 浏览

d3.js - 在 D3.js 可视化库中创建力布局

我正在做一个项目,该项目可视化书籍之间的引用。值得一提的是,我是 Javascript 的初学者。因此,我无法通过阅读 D3.js API 参考来走得更远。我使用了这个示例代码,效果很好。

我的 CSV 文件的结构是这样的:

等等

源和目标通过链接连接。这些是布局的要点:

  1. 分别为源节点和目标节点创建两个不同的圆圈。

  2. 为源节点和目标节点设置特定颜色。

  3. 圆圈应由书籍信息标记,例如,源节点标记为“书籍 1”,目标节点标记为“书籍 2”。

  4. 如果目标之间存在链接,则使此特定链接比从源到目标的其他链接更宽。

我希望你能通过创建这些点来帮助我。

提前致谢。

最好的问候埃涅阿斯

0 投票
3 回答
5121 浏览

javascript - 力有向图中的 d3 箭头

我很困惑。为什么通过简单地复制和粘贴示例http://bl.ocks.org/1153292箭头不对齐。(见下文)

在此处输入图像描述

更新:它适用于 chrome 和 safai,但不适用于 Firefox……更令人困惑。有任何想法吗?

您将在示例中进行哪些更改以获取直线而不是曲线?

谢谢。

0 投票
2 回答
1907 浏览

graph - D3.js 强制布局:如何隔离节点组?

我想要达到什么目的?

我想在树状结构中拥有一组节点,其中每个根要么是主根,要么是另一棵树的叶子的后代。

生成您在下面看到的内容很容易,但我真正想看到的是围绕每个根的完整圆圈。但是,由于节点相互排斥,因此每个集群之间存在以下间隙。我认为解决方案包括忽略来自不同根的叶子之间的电荷引起的排斥

在此处输入图像描述

我的想法

  • 在每个根周围设置某种半径,以排斥超出该半径的所有方向上的其他节点,允许叶子在其中是圆形的
  • 使用 linkDistances 和 linkStrengths 以某种方式排列集群,使其不会显着交互

这可能吗?

除了我模糊的想法,我真的不知道该怎么做!

通过阅读 D3 文档,我发现与动态链接距离和链接强度方法不同,节点电荷操作似乎是通用的:

如果这句话是真的,你们中的一个人可以指导我正确的方向吗?

0 投票
2 回答
2155 浏览

json - 仅从链接数据构建力有向图

我对 d3.js 有点陌生,但我玩得很开心。到目前为止,我已经实现了一个与许多示例和教程非常接近的力导向图。

直接关注

像许多示例一样,我有一个这样的 JSON 结构:

但是,我认为像这样构建我的数据源会更容易:

不是在我的图中显式定义节点,而是在链接结构中隐式定义它们。

原因

我想列出该项目的最终目标,以防有人有一些我不知道的特定示例代码或惯用的方法。

该项目的目标最终将是一个实时更新的图表。后端正在开发中,可能会进行一些更改和修订。

目前,我想象每 X 秒拉下一个更新的 JSON 提要,并使用新信息更新该图的结构。拉取的提要仅包含图的更新结构,因此脚本需要维护所有已拉取的节点和链接,并在必要时添加任何新的节点和链接。

谢谢!

如果以前有人问过这个问题,我很抱歉。我做了一些搜索,没有找到任何东西。如果我错过了,请随意侮辱和斥责我。

0 投票
1 回答
2709 浏览

d3.js - 以交互方式固定有向力图中的节点

我目前正在使用一个相当简单但很大的力有向图,我希望我的用户能够以他们当时认为合适的方式组织该图。为此,我想让他们以交互方式固定节点的位置。锁定节点的方法由我决定;我正在考虑双击节点或在鼠标悬停/抓取节点时按下一个键。

我不确定如何执行此操作,也找不到任何示例,非常感谢您的帮助。

非常感谢。

0 投票
1 回答
825 浏览

json - 从 json 数据生成节点以进行强制布局

我正在尝试制作类似于Mike Bostock 的气泡图:

在此处输入图像描述

但是,我希望为 json 生成节点,而不是随机生成节点。假设我有dataset一个有效的 JSON 变量,我如何nodes从中生成一个可用于强制布局的变量。

Mike 的实现(对于随机生成的圆圈)是:

假设我的datasetJSON 是这样的:

我希望每个圆的半径是sizeJSON 数组中每个对象的半径。