问题标签 [force-layout]

我想使用这个（http://vallandingham.me/vis/gates/）气泡图（在 D3 中制作）：

...走过一些不同的场景。简而言之，我想可视化选举数据。政党获得了多少票，组建政府的可能性是什么？

在数据层面，非常明显：姓名、议会席位数量、州 1、州 2、州 3 等。州 1 是 1 或 2。1 是政府中的位置，2 是反对党。很简单。

但该示例仅显示两种状态：All Grants 和 Grants By year。我想要的是更多的州，比如按年拨款。但是我不是一个很好的程序员，无法弄清楚如何使这项工作。当我添加新状态时，可视化不起作用。

这是控制状态的代码（咖啡）。

我正在使用 d3 强制导向布局，其中包含使用 SVGforeignObject元素实现的 HTML 节点标签。我想在不同时间选择这些元素以更新它们的位置和其他属性（并在使用enter()and创建和销毁它们时跟踪它们exit()），但我似乎无法像其他 SVG 元素一样选择它们。

这是一个紧凑的例子：

HTML：

Javascript：

这也在http://bl.ocks.org/3217448上。控制台输出为：

其中第一个数组包含circle元素，而第二个数组为空。为什么circle对象是可选择的，但foreignObject不是？我认为这与foreignObject. 我将如何选择它来在我的代码中操作它？非常感谢。

我正在使用 d3.js 进入令人兴奋的力导向布局世界。我已经掌握了 d3 的基础知识，但我无法弄清楚设置力导向布局的基本系统。

现在，我正在尝试创建一个简单的布局，其中包含一些浮动到中心的未连接气泡。很简单吧！？创建了正确的圆圈，但没有任何反应。

编辑：问题似乎是 force.nodes() 返回初始数据数组。在工作脚本上， force.nodes() 返回一个对象数组。

这是我的代码：

我有<script type="text/javascript">一个静态图的工作代码示例（仅部分），使用d3.js如下：

它产生了这种相当混乱的布局：

虽然它在技术上是正确的图形，但理想的布局应该是这样的（忽略不同的视觉图形）：

注意布局应该是固定的，这样重新加载页面不会改变每个节点的定位；布局也应该是静态的，因为没有动画效果并且节点不可拖动。这两个要求已经在上面的脚本中实现了。

那么我应该如何进一步配置此d3脚本以生成第二张图片中显示的布局？

我正在使用 d3.js 研究力有向图。我需要处理移动设备节点上的点击和双击事件。鼠标悬停和单击功能需要在 d3.js 中复制为点击和双击。我设法使触摸事件正常工作，但不知道如何在移动设备中捕获双击事件。

由于这个较早的问题，我使用强制布局生成了一个静态固定布局图，如下所示d3.js：

我有两个具体问题需要进一步定制布局：

首先，我注意到确定性地初始化节点位置（例如，在此处对角线完成，有关详细信息，请参阅脚本）固定节点的位置，并且节点的方向似乎取决于此初始化以及力图的尺寸* . 我想知道如何使A, D, E, F, I上图中的节点水平对齐？换句话说，我想将图形的方向逆时针旋转大约 45 度。我试图在中间水平初始化节点：

但是生成的输出在它们初始化的位置具有水平的所有节点和边缘。

svg其次，力图在元素内自动居中是真的吗？如果不是，我们怎样才能做到这一点？如果是，我们如何为svg元素内的力图指定一个中心？

（* 注意：奇怪的是，当设置力图的.size([w, h])位置w = h并确定性地沿对角线初始化节点时，所有节点和边都沿输出中的对角线定位，为什么？）

我有一个使用强制布局的图表，但它有一个固定的宽度w和高度h：

尽管屏幕或浏览器窗口大小发生变化，但这会导致 svg 图形不会按比例缩小或缩小。为了使其具有响应性（即自动调整自身大小），我尝试使用viewBox和preserveAspectRatio属性：

不幸的是，这不起作用，因为当我调整浏览器窗口大小时没有任何反应。我想知道力图的 是否.size([w, h])与此有关。

请阐明如何使用力布局图viewBox和属性。preserveAspectRatio

我想绘制一个有向图，其中任何节点都可以链接到任何其他节点（即没有定义的层次结构），我正在使用强制布局引擎，但它不支持点击事件处理。我希望能够单击一个节点并使该节点居中并围绕它布置其他所有内容。

在D3中可能吗？

编辑：根据 d3.force.layout 的 API 文档：

force.on（类型，监听器）

注册指定的侦听器以从强制布局接收指定类型的事件。目前，仅支持“tick”事件

这表明简单地添加一个点击事件处理程序是行不通的。

此外，树布局需要（据我所知）层次结构，我的数据更加纠结。

所以我已经有一个页面，它绘制了一个力导向图，就像这里显示的那样。

这很好用。我正在使用这里的 JS ，通过一些调整来更好地分散节点。

这些或多或少是唯一的区别：

降低链接强度似乎使链接更像弹簧，因此它变得类似于经常使用的Fruchterman & Reingold技术。这工作得相当好，但仅适用于相当小的图形。对于较大的图表，交叉点的数量只会增加 - 正如人们所期望的那样，但它所采用的解决方案通常远非最佳。我不是在寻找获得最佳解决方案的方法，我知道这非常困难。我只是希望它有一些粗略的添加，试图将线条和节点分开。

有没有办法在链接之间以及节点之间添加排斥？我不熟悉 D3 force 的工作方式，我似乎找不到任何说这是可能的...

在过去的几天里，我一直在努力解决这个问题：我有一个力有向图，可以像这个例子一样标记它的边缘。我面临的问题是，当图形更新时（即：在用户单击时添加图形上的一个节点）它会更新图形，但它会留下我之前写的旧边标签：

附加新图表之前和之后：

如您所见，我的边缘标签在更新后仍然存在。我有一个每次新数据进入时都会调用的函数，在这个函数中我有以下代码来绘制标签：

svg 变量在顶级闭包中声明一次，如下所示：

我的图表有一个 tick() 函数，它计算每个标签的位置，如下所示：

我尝试将这个 svg 声明向下移动到更新函数中，以便每次发生图形更改时都会对其进行实例化。这实际上有效 - 但它会完全复制整个图表。第一个，原始副本仍然保留旧标签 - 但第二个副本完全按照我的意愿行事。有没有办法，也许，而不是附加 svg，有一种替换的方法？我也尝试过调用 exit().remove() 也没有任何运气。

非常感谢您的参与。这一直让我感到沮丧，因为我应该如何做到这一点。