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

javascript - 修复 D3 强制定向布局中的节点位置

我希望我的力导向布局中的一些节点忽略所有力并根据节点的属性保持在固定位置,同时仍然能够被拖动并对其他节点施加排斥并保持它们的链接线。

我认为它会像这样简单:

我还尝试在每个刻度上手动设置节点的 x 和 y 属性,但是如果节点受到力的影响,链接会继续浮动到节点所在的位置。

显然,我对这应该如何工作有一个基本的误解。如何将节点固定在某个位置,同时保持链接并仍然允许它们可拖动?

0 投票
1 回答
5235 浏览

javascript - 建立 D3 力有向图

致尊敬的读者。我在 javascript 方面相当新,我遇到了这个问题。我正在尝试实现这个力有向图的修改版本:

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

json 数据是从 php 脚本动态生成的。这个想法是将连接到一个特定节点(在 php 脚本中定义)的所有线用一种颜色着色,而所有其他的线用灰色阴影着色。我正在尝试通过将 json 文件中的源变量与 php 脚本中的变量匹配并在这样的情况下更改颜色来做到这一点:

但是这不起作用。脚本工作正常,但如果我这样做,颜色不会改变

几天来我一直盯着这个,试图弄清楚如何完成这项工作,但我被困住了。任何帮助将不胜感激!!

这是我的完整脚本

0 投票
0 回答
4676 浏览

javascript - D3 力有向图。鼠标悬停显示标签

这与这个问题有关

警告!我是一个菜鸟程序员......非常感谢任何帮助!

我正在使用http://mbostock.github.com/d3/ex/force.html在一些 php 生成的 json 数据上生成力导向图。我设法获得了一些代码(//在 D3 强制有向图中突出显示选定节点、其链接及其子节点),从而在鼠标悬停时,除节点和连接节点之外的所有内容都会消失。这是我当前的代码:

http://jsfiddle.net/WNHaB/

我现在想在淡入淡出的同时将标题添加到节点和鼠标悬停的每个子节点。这将大大提高程序的可用性。知道怎么做吗???

更新

所以感谢 Nachtgold,我得到了节点上的标签,更改了字体颜色和大小。光标碰巧碰到文本标签时发生的闪烁非常烦人。我通过使用.style("pointer-events", 'none') 当前版本修复了这个问题:

http://jsfiddle.net/dfETs/

我仍然想相对于节点移动文本,以免它们重叠。任何想法如何做到这一点?

非常感谢!

0 投票
1 回答
7876 浏览

javascript - 在 D3 中移动固定节点

我在 D3 强制导向布局中有节点设置为 . 固定=真。如果我设置 .x 或 .y 值,节点本身不会移动到新位置。

这是我的功能:

更新 1:

这是基于 Jason 建议的工作功能:

0 投票
1 回答
6115 浏览

javascript - 使用 D3.js 编写简单的力布局应用程序

我开始学习 D3.js 并想使用强制布局编写一个简单的应用程序。目标是创建 3 个浮动的节点,可以使用鼠标拖动。这是我使用文档所取得的进展,但是我看到的只是窗口左上角的一个黑色小圆圈(我假设所有三个都重叠在那里)。我对每一步都发表了评论——至少我认为他们正在这样做。

我的问题:

  1. 我错过了什么?我还需要做什么才能让节点浮动并可以拖动?
  2. 我想要混合或圆形和矩形节点(基于节点的某些属性)。我该怎么做呢?
  3. 当我运行应用程序时,我在 Firebug 中看到以下错误:

    “网络错误:404 未找到 - http://mbostock.github.com/d3/d3.geom.js?1.29.1 ” d3.geom.js?1.29.1

    “网络错误:404 未找到 - http://mbostock.github.com/d3/d3.layout.js?1.29.1

为什么是这样?我尝试的一些强制布局示例也给出了这个错误,但它们似乎工作正常!

0 投票
2 回答
2879 浏览

svg - SVG 标记在用作 D3 强制布局链接的 d3.svg.diagonal 曲线上的方向不正确

我对 SVG 和 d3.js 有点陌生。

在使用 D3 力布局绘制图形时,我使用了一个简单的对角线生成器并使用标记端来绘制箭头。

当使用弧线而不是对角线发生器时,箭头看起来很好。但是使用如下代码中的对角线生成器不会产生正确的标记:

...然后还有:

标记根本不与顶点定向。

任何帮助,将不胜感激!

0 投票
3 回答
11157 浏览

d3.js - d3.js:如何创建“力导向图集群”

我一直在探索 d3.js 库,尤其是力导向图的创建。我仔细阅读了 Bostock 等人关于它的论文,并注意到我正在尝试创建的图形的精确类型,基本上是一个带有颜色编码区域围绕羽毛组的力导向图。

这是第 3 列第 2 行的插图,此处标记为“力导向图簇”:http: //vis.stanford.edu/papers/d3

这里的代码生成基本图: http: //mbostock.github.com/d3/ex/force.html

我的问题是:动态生成区域多边形的代码是什么?

0 投票
3 回答
1541 浏览

javascript - 了解 d3.js 源代码:卡在 function.call() 和“=+”

在d3.layout.force的源码中,第158行,有这段代码

现在,如果你转到第 225 行,你会看到

我在这里不明白的是这条线

我是 JavaScript 新手,无法理解这里发生了什么。

据我了解,charge 只需要 1 个参数 ( x)。这里“ this”被传递给当前对象的上下文,但其他两个呢?nodes[i]" " 和 " " 中的哪一个i被视为 " x" ?

又是什么“ = +”在这里做什么?

0 投票
2 回答
3830 浏览

javascript - 如何在 D3.js 强制有向图中设置焦点节点?

我有一个数据集,它定义了在力有向图中使用的许多节点。看起来像...

如何专门告诉 d3.js 库中的 force.layout 使用 id = "N1" 的 "Node 1" 作为主根或焦点节点?

0 投票
1 回答
18439 浏览

d3.js - D3 具有拖放支持的强制有向图,以使选定的节点位置在放置时固定

可以在此处找到有关力直接图的示例:http: //bl.ocks.org/950642

如何轻松添加对拖放的支持?它应该将节点设置为固定它放置它的当前位置。重要的是其余节点仍然使用“力定向模式”来自动定位图中的其余节点

https://github.com/mbostock/d3/wiki/Force-Layout

我玩了一些但没有成功,想知道是否有人能够给我一个关于如何添加上述支持的快速示例。