问题标签 [force-layout]

我有一些类似于力导向图示例的东西。主要区别在于没有强制力——布局是静态的，除了用户拖动交互。我添加了在用户定义的节点组周围绘制凸包（作为 svg:path 元素）的代码。随着节点的移动（即.on("drag")），计算外壳的代码被触发。这意味着当节点被拖动时它会不断触发。通常有 10 到 30 个船体；一个节点可能在一个或多个外壳中。见下文：

我试图弄清楚是否有更有效（更高性能）的方式来做我正在做的事情。暂时保持高水平：

拖动时，更新所有船体图形：

1. 对于每个船体，创建组成节点坐标的数组。
2. 将上述数组中的每个坐标对替换为与原始点相距一定距离r的 8 个点。这是为了填充/扩张船体，因此它实际上不会接触任何节点。
3. 将计算出的坐标馈送到d3.geom.hull.

我在 Chrome 中获得了大约 50 fps，这一点也不差，但它似乎是一个非常低效的设置。

我唯一明确的想法是将节点包含在节点数组中的船体的 ID 存储在节点数组中，并且只更新那个/那些船体而不是所有船体。我还想知道更有效的数据结构来存储船体数据（而不是路径本身）。目前数据结构如下所示：

请原谅这个开放式问题，但我希望有一些我不熟悉的编程技术在这里可以很好地工作。

我目前正在研究可视化我的前任编写的批处理脚本的结构，它只是从某处重复 SELECT 并插入到某处。我尝试使用树函数，但是当我希望 JSON 的同一索引中的相同名称被识别为同一节点时，它的使用并不灵活。

所以我决定使用强制布局功能，并在谷歌搜索的帮助下几乎完成了。但是，虽然我可以在同一区域映射同一组数据库或脚本以初始化部分，但不知何故 force.on("tick", function() ~~ 重新计算每个节点之间的距离然后它变得非常混乱。但没有这个，它不会显示节点之间的链接。

有谁知道如何在使用 JSON 重新计算链接时固定布局。我的代码是这样的：

我是 D3 伟大世界的新手。

我有一个强制导向布局，我需要在强制导向布局中“拖动选择”节点（圆圈）。

我试过这段代码：

但这不起作用......请帮忙。

到目前为止，我已经在一个力导向图中使用了 d3.svg.symbol() 来区分不同的节点类型。

我现在想通过将节点显示为 svg 图像来区分不同的节点类型。按照其中一个示例，我使用以下代码显示节点图像：

这确实显示了 svg 图像，但我有两个问题：

1）我想根据属性缩放节点大小。据我了解，这可以通过提供“规模”属性来完成

到合适的地方，比如图片标签本身或包含图片的组：

碰巧的是， scale() 变换置换了图像：它们不再位于边缘的端点上。在初始化图形时如何正确调整图像大小，最好使控制机制在单个函数中（例如，这样我就不必分别控制 x、y、width、height）？

2) 当图表被缩放时，Chrome 会模糊图像，而在 Firefox 中图像仍然清晰（图片）。如何避免这种模糊？

编辑：根据 duopixel 的建议，现在的代码是：

它解决了问题 #1，但不是第二个问题：通过选择

生成的 svg 图像包含很多空白空间（通过使用 firebug 的选择工具选择图像可以看到）。这些图像是在 Inkscape 中创建的，画布尺寸裁剪为 50x50，这应该是正确的查看像素尺寸。

我正在尝试创建部分填充的圆圈，就像最终纽约时报政治大会可视化中的圆圈一样：http ://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

我为 d3 中的 clipPaths 找到的两个最清晰的代码示例（https://gist.github.com/1067636和http://bl.ocks.org/3422480）为每个剪辑路径创建具有唯一 id 的单个 div 元素然后将这些路径应用于单个元素。

我不知道如何从这些示例转到可视化，该可视化具有基于数据值的一组元素中的每个元素的唯一圆形 clipPath，以便我可以创建我的效果。

这是我到目前为止所拥有的：

给定具有以下结构的数据：

1) 为数据集中的每个对象创建一个带有圆圈的力图。圆的面积来自对象值。

2) 使用 mbostock 示例http://bl.ocks.org/3422480中的算法从每个数据点的比例 (pctFull) 计算 k (和 h)

3) 使用 k 为覆盖圆的适当区域的每个数据点生成一个矩形。

我认为如果我可以将每个矩形的可见性限制在其各自的圆圈内，那么这个插图就可以完成，但这就是我被卡住的地方。我尝试了很多东西，但都没有奏效。

这是jsfiddle：http: //jsfiddle.net/G8YxU/2/

我目前正在使用 d3 进行有趣的交互式导航，其中每个节点都是我网站上的一个位置。希望在调整窗口大小或用户拖动节点时，用户可以很高兴看到导航的交互。

问题是在单击节点时，我想更改节点以指示哪个节点当前处于“活动状态”。但是，每当我在力布局上调用绘图以激发修改时，力布局“摆动”并重新计算所有节点的位置。有没有一种简单的方法来改变节点而不改变它们的位置或重新计算它们的位置？

我正在尝试在 d3 force 有向图示例上实现搜索功能。当我在文本字段中输入搜索查询时，相关项目将显示，不相关的项目将淡出。

我已经实现了 searchUpdate 和 count 方法，如下面的jsfiddle所示。

我需要一些帮助来褪色这些物品。当前d3.select("svg")淡化整个图形，同时d3.select("#"+n.id)产生错误。

我使用 d3 创建了一个力布局，效果很好。我的初始数据是从一个 json 文件加载的，并且图表是使用类似于此 d3.js 示例的技术绘制的：

现在图表在屏幕上，我需要从通过网络套接字接收的数据中即时添加、更新和删除节点。我有添加和删除方法工作，但我找不到更新现有节点属性的正确方法。

从我进行的阅读中，我收集到正确的技术是更改数据源，然后使用 enter() 方法更新图表。

要更新节点，我正在执行以下操作：

然后更新函数更新节点：

我对此采取了正确的方法吗？当我尝试此代码时，尝试在圆上设置半径属性时获得的节点是节点数组中的最后一个节点。即包含分层节点数据而不是单个节点对象的那个。

任何指针将不胜感激，我在这上面花了太多时间:)

我想在 D3 中向强制定向图形布局添加一种行为，即一旦放下，拖放的 svg 节点就会固定在其位置，无论图形中发生什么其他情况，都不再改变位置。我已经阅读了一些关于这个 API 的内容，但我无法找到一种方法来让那个 API 工作。

我试图解决的问题是允许用户“挑选”一个复杂的力图。

我正在尝试使用 D3 库设计物理重力模拟，但我运气不佳。“布局”API 参考声明物理重力可以通过正“电荷”参数实现，但我不确定这将如何工作。

我目前正在尝试实现的是一个单一的 SVG 元素，它包含多个以不同速度上升的可变权重和大小的矩形，最终离开视口——它们的权重将定义它们上升的速度。（基本上，我只是试图从视口顶部之外实现全局引力。）

有没有可行的办法按照D3的兵力布局来做到这一点？我只是在寻找概念性的解决方案，但示例和代码片段也很受欢迎。

提前致谢！