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

d3.js - 在 d3.js 中折叠/展开树的子节点?

我正在构建一个树形结构(或者更确切地说,用我自己的 json 中的一组我自己的数据修改其中一个示例)并且我正在尝试创建一些功能:

我的树的布局来自树示例: http: //mbostock.github.com/d3/ex/cluster.html

我正在添加(到圆圈中)一个 onclick 事件,我想折叠单击节点的子节点。也就是说,当用户点击与某个节点关联的钢蓝色圆圈时,我希望该节点的子节点消失。

我已经浏览了文档,但没有发现任何可以让我让节点崩溃或消失的东西。

我能做什么?

0 投票
3 回答
31549 浏览

d3.js - 带边界框的 D3 强制定向布局

我是 D3 的新手,无法为我的强制定向布局设置边界。我已经设法(从示例中)拼凑出我想要的东西,但我需要包含图表。在刻度函数中,转换/翻译将正确显示我的图形,但是当我将 cx 和 cy 与 Math.max/min 一起使用时(参见注释代码),节点被固定在左上角,而线条被正确包含。

这是我下面的内容......我做错了什么?

0 投票
1 回答
4387 浏览

javascript - 如何使用 d3 及其强制布局构建树?

我正在尝试以树的形式排列我的节点。现在,我从这里开始处理这个例子。目前,我依赖于强制导向布局,但我正在尝试对其进行修改,以便我可以获得具有预定数量级别的树,即如果一个节点属于特定的“层”,它应该属于与其他节点相同的区域层。

我试图在下面的图片中解释更多,但有人对此有什么建议吗?内部是否有任何预先确定的算法d3可以做到这一点,或者可以调整来实现这一点?

在此处输入图像描述

0 投票
1 回答
8590 浏览

graph - Charge based on size - d3 force layout

I'm trying to make a force directed graph using d3.layout.force, and I need the container to be resizable - that is I'd like to be able calculate appropriate charge and linkDistance values based on the size, or have d3 do it for me in some magical way.

I've made an attempt (link: http://jsfiddle.net/VHdUe/6/) which only uses nodes. I'm setting the charge to a value that's based on the number of nodes that would fit across the radius of the circle that it tends to be shaped like.

The solution works for some middle-sized containers, but if you click resize a few times, you can see it doesn't really work for all sizes...

The only way forward I can see is using an svg scale transform, which will mess up the size of my elements unfavorable. Any other options?

PS: I have seen http://mbostock.github.com/d3/talk/20110921/bounding.html (the answer to D3 force directed layout with bounding box), but I'd rather have a gravity-based solution than a bounding box one.

0 投票
2 回答
2250 浏览

javascript - 如何向 d3 生成的力导向图的节点添加标题属性?

在 d3 演示(http://goo.gl/lN7Jo)之后,我正在尝试创建一个力导向图。我正在尝试向通过这样做创建的节点元素添加标题属性。

但是,我的图表的节点没有显示标题属性。这样做的正确方法是什么?谢谢你。

0 投票
1 回答
4333 浏览

javascript - d3 力导向图的 JSON 中的节点、组和值是什么意思?

我正在尝试创建一个 d3 力导向图(http://mbostock.github.com/d3/ex/force.html)。这是包含我的数据的简单 JSON 文件。

我在同一个组中有两个节点。我也在尝试在两个节点之间创建链接。但是,我的页面仍然是空白的(我确信 JSON 以外的其他部分都是正确的)。

什么是“组”?为什么边缘既有“源”又有“目标”——这些值是什么?为什么链接有“价值”?链接不只是未加权的边缘吗?我无法理解数据存储的 JSON 结构。

0 投票
1 回答
2534 浏览

javascript - 为什么我的 d3 力导向图不显示边?

我使用 d3 创建了一个简单的力导向图:http: //goo.gl/afHTD

为什么图表的边缘不显示?这是我的整个 HTML 文件。当然,您也可以通过在我的链接页面上查看源代码来查看和修改它。它基于 d3 网站上的示例。

不应该var link...显示边缘?我的 JSON 文件也很简单:

0 投票
1 回答
16524 浏览

javascript - 如何翻译 d3.js 节点?

我有一个包含一组节点的 d3 力导向图:

这渲染得很好。

div当我显示带有 id的细节时,我现在想将这些节点向右平移(移动)200 像素detail_container

我尝试了以下操作,但显示时节点没有任何反应detail_container(除了显示细节div):

d3.selectAll("g.node")语句包含节点数据,我可以通过查看控制台中的数据来确认:

作为另一种方法,我将缩放/平移行为附加到我的图表中:

这工作正常。但是,这与鼠标交互,而不是与我的程序中发生的事件交互,所以是否有一种编程方式来调用缩放/平移行为,以便我可以完成我想要的翻译?

0 投票
2 回答
3306 浏览

javascript - NaN on Force-Directed Layout Append in D3.js

I'm using a force-directed layout in D3 that grabs data from a JSON file and then, when one of the nodes is double-clicked, queries the database to find links to that node and updates the links and nodes arrays attempting to append the new data to the viz. It seems when the nodes are appended without links, they work fine, but the links to the xy coordinates end up being NaN. You can see the effect here, just double-click on one of the nodes:

http://blockses.appspot.com/2432083

0 投票
1 回答
762 浏览

d3.js - 带有标记的力图上的 D3 鱼眼

我喜欢新的鱼眼插件 (http://bost.ocks.org/mike/fisheye/),但想让它在使用路径和标记而不是线条的力图上工作。我是 D3 的新手,到目前为止结合了标记演示,鱼眼演示打败了我,我想知道是否有人成功并能指出我正确的方向。

干杯本