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

javascript - 在 D3 力有向图中突出显示选定节点、其链接及其子节点

我正在研究 D3 中的力有向图。我想通过将所有其他节点和链接设置为较低的不透明度来突出显示鼠标悬停的节点、其链接及其子节点。

在这个例子中,http://jsfiddle.net/xReHA/,我能够淡出所有的链接和节点,然后淡入连接的链接,但是,到目前为止,我还不能优雅地淡入作为当前鼠标悬停节点的子节点的连接节点。

这是代码中的关键功能:

Uncaught TypeError: Cannot call method 'setProperty' of undefined当我尝试在从 source.target 加载的元素上设置不透明度时出现错误。我怀疑这不是将该节点加载为 d3 对象的正确方法,但是如果不再次遍历所有节点以找到与链接的目标或源匹配的节点,我就找不到另一种加载它的方法。为了保持性能合理,我不想过多地迭代所有节点。

我以淡化来自http://mbostock.github.com/d3/ex/chord.html的链接为例:

在此处输入图像描述

但是,这并没有显示如何更改连接的子节点。

任何关于如何解决或改进这个问题的好建议都将受到热烈的支持:)

0 投票
1 回答
5194 浏览

animation - D3.js - 是否可以在力导向图和节点链接树之间进行动画处理?

我正在使用该D3.js库并查看力导向图演示:

http://mbostock.github.com/d3/ex/force.html

在此处输入图像描述

我也在查看节点链接树:

http://mbostock.github.com/d3/ex/tree.html

在此处输入图像描述

我想做的是:

- 从力导向图开始,当用户点击一个节点时,让它平滑地动画成一棵树,选定的节点位于中心。- 然后,当用户单击画布中的任何空白区域时,它应该动画回到力导向图。

以前有没有人做过这样的事情,或者对最好的方法有什么建议?我是 D3.js 的新手,不知道框架是否支持这一点。

0 投票
3 回答
2783 浏览

javascript - D3/GraphGL 力定向网络可视化的放大镜效果?

D3当使用orGraphGL库将鼠标悬停在力导向图形可视化中的节点上时,是否可以创建平滑的动画放大效果(类似于 Mac OS X 上的停靠栏) ?

节点需要扩展和置换周围的其他节点,同时保持力导向布局。

如果有人可以分叉这个来演示,那就太好了!谢谢

请注意,这与此问题中的简单缩放不同

0 投票
2 回答
19006 浏览

javascript - d3.js 将点击动作添加到强制布局圈?

我正在努力创建一个具有强制布局的无向图。另外,我尝试通过点击事件来改变每个圆圈(节点)的颜色。有什么想法可以在圆形元素上添加这样的事件。我输入了这段代码,但它不起作用。

0 投票
2 回答
9360 浏览

javascript - 如何在 D3 强制布局中添加复合节点?

我正在将节点添加到这样的力布局图中:

有没有办法将复合 SVG 元素添加为节点?即我想为每个圈子添加一个超链接,所以我需要这样的东西:

<a href="whatever.com"><circle ...></circle></a>

0 投票
2 回答
2838 浏览

d3.js - d3.js 在非 svg 元素上强制布局

d3.js layout.force 可以用来(重新)定位非 svg 元素,如 div 吗?

如果 divposition: absolute;可能left并且top可以用作 svg 元素中使用的x1andy1属性的等价物?

目标是在支持 IE8 的情况下对图像和菜单项产生一些强制效果。我知道 svg 节点可以是图像,但因为我需要支持 IE8,所以这不是一个选项。

如果不可能,是否将svgweb与 d3.js 一起用于此目的?

谢谢!

**更新**

D3好帅!!我开始掌握它的窍门,并且肯定可以在像 div 之类的常规 html 元素上使用“原力d3.layout.force()”,因为本质上为您可以使用的每个“tick”(或框架)提供 x 和 y 坐标,但是你想。
IE:

工作得很好!

拖动.call(force.drag);确实会给您带来问题(如预期的那样)。

萤火虫:

不过应该是可以修复的。

0 投票
2 回答
1346 浏览

d3.js - 在 d3.js 中对有向图中的节点进行分组

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

0 投票
2 回答
8445 浏览

d3.js - 使用根节点勾选后中心力定向布局(返回中心)

我正在尝试使用 D3.js 进行强制定向布局。我需要的是按根(或其他选定节点)将布局居中,并在刻度函数完成后将此节点返回到 svg(例如画布)中心(图形 alpha 较低)。是否可以?我发现了一个例子

http://bl.ocks.org/1080941

但我无法使根(使用 aplha 或其他自定义刻度函数计算时)返回中心(通过此特定节点将布局居中)。

任何帮助,将不胜感激。

0 投票
2 回答
1652 浏览

javascript - D3.js 让节点出现在中间而没有“反弹”

我有一个使用“节点”和“线”的 D3 设置。当图表第一次出现时,它会随着重力反弹,直到它停留在中间。有谁知道一种让它自动出现在中间而没有“反弹”效果的方法?

PS我正在使用强制布局

0 投票
1 回答
35215 浏览

javascript - 将新节点添加到强制导向布局

关于 Stack Overflow 的第一个问题,请耐心等待!我是 d3.js 的新手,但一直对其他人能够用它完成的事情感到惊讶......几乎同样对我自己能够取得的进展感到惊讶!显然我不是在摸索什么,所以我希望这里的好心人能给我带来光明。

我的目的是制作一个可重用的 javascript 函数,它只需执行以下操作:

  • 在指定的 DOM 元素中创建一个空白的力导向图
  • 允许您在该图中添加和删除带标签的、带有图像的节点,指定它们之间的连接

我以http://bl.ocks.org/950642为起点,因为这本质上是我希望能够创建的那种布局:

在此处输入图像描述

这是我的代码的样子:

每次我添加一个新节点时,它都会重新标记所有现有节点;这些堆积在一起,事情开始变得丑陋。我明白为什么会这样:因为当我update()在添加新节点时调用函数函数时,它会对node.append(...)整个数据集执行一次操作。我无法弄清楚如何仅对我正在添加的节点执行此操作......而且我显然只能node.enter()用来创建一个新元素,因此这不适用于我需要绑定到节点的其他元素. 我怎样才能解决这个问题?

感谢您在此问题上提供的任何指导!

编辑是因为我很快修复了前面提到的其他几个错误的来源