问题标签 [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 投票
2 回答
3635 浏览

javascript - 从范围滑块对用户输入重新启动 d3 模拟

我正在使用d3-force布局构建“弹簧”。我想通过用户输入来操纵它的属性,如“强度”和“距离”。为此,我目前正在使用“输入范围滑块”。为了更好地理解,我在 codepen 上设置了一个工作草案,这个问题与此相关:http ://codepen.io/bitHugger/pen/XNqGNE?editors=1010

的HTML:

我想做这样的事件处理:

现在,当范围滑块发生某些交互时,我想重新启动或重新计算 d3.simulation 对象。这是我目前的模拟:

对于强度和距离,这些值当前是硬编码的。我想将其更改为例如:

我试图设置一个 d3.call().on() 函数,但无法让它工作。我想知道如何根据 unser 输入来操纵模拟,这发生在 force() 函数之外/svg 容器之外。

遗憾的是,我无法正常工作,也不知道如何设置适当的 d3 事件侦听器,该侦听器对输入按钮做出反应,然后根据更改的值重新计算力布局。有任何想法吗?

0 投票
1 回答
452 浏览

javascript - d3.js:将匿名函数作为参数传递给定心力?

我正在制作一个交互式气泡图,并且正在研究将数据分成两组移动到屏幕两侧的功能。我在模拟中使用了定心力,因为我认为它比使用 forceX 和 forceY 提供了更好、更一致的数据显示。但是,我在拆分数据时遇到了麻烦。

我的想法是,由于您可以将匿名函数作为参数传递给 forceX 以确定节点是向左还是向右移动,因此理论上您可以对中心力中的 x 值执行相同的操作。我的中心力代码如下所示:

为了比较,这里是完成同样事情的 forceX 的代码:

不幸的是,控制台说“Unexpected value NaN parsing cx attribute”。当我运行定心力并将所有数据推送到 cx = 0 (默认值)时。

我在这里缺少一些基本的东西吗?您不能将匿名函数作为参数传递给定心力吗?如果没有,有没有更好的方法来做到这一点?

谢谢!

开始状态

拆分后

在此处输入图像描述

0 投票
1 回答
1497 浏览

javascript - 将节点标签添加到 D3 网络

我不知道如何将节点标签添加到我的 D3 强制导向网络。此代码显示标签,但它们不会随网络移动。

如何将文本附加到节点本身?有人有什么建议吗?

谢谢一堆。

0 投票
0 回答
66 浏览

javascript - d3:仅在力有向图中将类应用于新节点

我有一个带有力导向图的动态模拟。

我想实现所有新节点都以某种颜色显示,而现有节点具有所有相同的其他颜色(由 id 标识的节点)。

在每次迭代中(我想),我会将一个类应用于现有节点,并将新节点仅设置new-node为“输入”选择中的一个类:

0 投票
2 回答
246 浏览

javascript - d3-force 防止单个节点移动

我在具有链接节点和单个节点的网络上使用 d3-force 模拟。

问题是:力量把一切都推得很远。

我想要的是,力只作用于链接的节点,如果它们被推向彼此或 2 个链接的组件重叠。

0 投票
1 回答
253 浏览

d3.js - d3js 多网络问题

场景:

我有 d3 渲染多个网络。

它由单个节点、多个连接的节点网络组成。

我正在尝试附加 d3-force (模拟),以便节点在拖动时不会重叠,并且整个网络保持相对定位。

我正在使用多人力量。

问题:

  1. 当模拟加载(simulation.restart())时,整个网络不断分散。所有节点/网络都会无限期地离开。
  2. 即使来自一个网络的节点被拖动,所有其他网络也会移动。

如果有人能指出我正确的解决方案,将不胜感激。

这是一个小小提琴:https ://jsfiddle.net/pdubey84/or0tn49k/2/

网络

0 投票
0 回答
65 浏览

javascript - 拖动和创建链接不适用于缩放

伙计们,我正在关注这个示例问题,当我添加缩放功能时,该代码不会拖动并在节点之间创建边缘。我在想的问题可能是“g”附加了 SVG 以进行缩放。

这是为缩放和平移而添加的。

0 投票
1 回答
10817 浏览

json - d3 - “无法在数字 '65' 上创建属性 'vx'”

所以我试图将这个很好的例子力导向图用于一些非常简单的 json:https ://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json

我的工作在这里:codepen

我从 d3 得到一个永无止境的错误信息,一开始没有错误提示我的代码有问题。它是这样开始的:

我实际上在 d3 v4+ 中找不到关于力图的好的介绍性资源,所以我必须破解它。

html

代码

0 投票
1 回答
829 浏览

javascript - 固定节点未固定(d3 Force Directed Graph)

我正在设置要修复的节点

与没有 x 和 y 值的情况相比,这确实可以在明显不同的位置正确显示图像,但是 .. 固定属性不起作用。

这是我的代码:codepen

如果有人也知道我如何设置画布,以便没有任何东西从顶部或底部逸出,我也会很感激。

0 投票
1 回答
137 浏览

javascript - 将 d3force 应用于具有多个组的网络

我是 d3 的初学者,因此这个问题......我有一个包含一堆节点、链接和组的网络,如下所示:

我想在其上实施 d3-force,以便每个组都有自己的力,并且当一组受到作用时,另一组不会受到影响。

请注意节点 5 自其单例以来如何具有组 0。所以所有的单例都有第 0 组。