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

javascript - 与 D3.js 的相互作用力

我试图在粒子向“焦点”移动时“模拟”粒子上的引力。实际上,我正在尝试修改以下代码,以便粒子在前往蓝色节点的途中被橙色节点略微拉离轨道。我的问题是我无法使用 D3.js 强制定向布局来概念化它。我意识到这是一个非常模糊的问题,但非常感谢任何帮助!图像和代码如下:

在此处输入图像描述

1 http://jsfiddle.net/fbW7T/1/——之前。

[2] http://jsfiddle.net/fbW7T/2/ -- 之后,根据 Lephix 的提议。

0 投票
1 回答
2725 浏览

javascript - 在 d3 力有向图中使用曲线

我想通过 d3 force layout 可视化一些数据。

但是,连接节点的链接是直线。但是数据可能有多个连接两个节点的边。所以力布局中的直线无法正确显示所有这些。我试图将路径附加到链接而不是行。但它没有用。我不知道那是因为我以错误的方式使用它还是强制布局不接受路径作为链接。

0 投票
2 回答
6327 浏览

javascript - 在 D3 强制布局链接标记上缩放箭头

我在 d3 力有向图中有以下代码,我试图根据一个值(从 1 到 3)改变链接的大小及其关联的箭头。笔画粗细会随值而变化,但箭头不会保持在正确的位置。当笔画粗细从 1 变为 3 时,它往往会从末尾移回。关于在更改笔画值时如何保持箭头(标记)正确对齐的任何想法?非常感谢!

0 投票
2 回答
15272 浏览

javascript - 从 svg 外部的按钮单击 d3 中的节点

我使用 D3 创建了一个力有向图,并在普通 div 中显示了节点的 ID。我需要在 div 中突出显示其 id 已被单击的节点。我已经搜索了节点的 id 并使用普通的 javascript 尝试单击它,但它不起作用。

0 投票
1 回答
2409 浏览

javascript - 使用 d3.js 在强制布局中添加和删除节点的问题

我试图通过从 Zabbix API 获取数据来可视化服务器的可用性(以及稍后的其他事情,一旦这工作)。您可以在 Zabbix API 文档中查看有关返回数据的示例 [此处][1]。

获取数据不是问题,但我认为 d3.js 的数据加入有一些问题,或者更确切地说我应该如何做到这一点。

获取数据后,我得到了一组按字母顺序排序的服务器,我希望新的服务器出现,删除的服务器会消失,可用性的任何变化(或将来)都会用颜色或其他任何东西反映出来可能会想到。

关键是图形不应该重新初始化,它应该通过添加或删除节点来更新。

这是我遇到的问题。我设法将越来越多的节点添加到列表中(从不清除它),我设法让它们在每次获取新数据时“重绘”,即再次添加所有节点,并像他们一样捕捉到中心加载页面时首先执行此操作。

第三个导致所有节点都卡在左上角。

后者是我的代码的当前状态。

我有点不确定我在这一点上做错了什么,我正在看似乎与我需要的相当接近,无论如何都没有链接(现在)。这很好用,我试图在我的代码中复制这种行为,但它不起作用。

如果有人对我有一些指示,我将不胜感激,那将是很棒的。过去一周我在工作中一直在玩这个,但没有进一步了解:)

谢谢!

因为我只能在工作中访问 Zabbix,所以我真的只能在 CET 时间的 16-21 时间段内进行测试,今天大约还有 4~ 小时。如果有人在晚上有任何建议,我明天会试试看:D

我在 GitHub 上的代码将在我的帖子下方的链接中,因为在这个网站上缺乏声誉让我陷入了一个阴暗的洞,我只能在我的帖子中添加两个链接。

为什么这不是全球性的?我在其他 SE 网站上有 10 多个代表。

编辑:

仍然遇到问题,每次刷新数据时,圆圈都会像您第一次加载时一样“输入”:http: //mbostock.github.com/d3/talk/20111018/collision.html 现在不知道该怎么做: /

0 投票
2 回答
220 浏览

database - 深度、可遍历的以自我为中心的图的缓存策略

首先,让我解释一下我正在构建的内容:

  • 我有一个 D3.js 强制布局图,它植根于中心,周围散布着一堆节点。中心节点是某种实体,它周围的节点是与根有某种关联的其他实体。边缘是实际的关系(即两者是如何相关的)。

  • 可以单击外部节点以使目标实体居中并加载其关系

  • 该图是“以自我为中心”的,因为每次单击节点时,它都会成为中心,并且只显示与自身直接相关的关系。

我的设置,以防万一:

  • 我通过 Node.js 提供 API,它将请求转换为对具有大量数据集的 CouchDB 服务器的查询。

  • D3.js 用于布局,除了 jQuery 和 Bootstrap,我没有使用任何其他客户端库。如果有任何对这个缓存任务有帮助的,我愿意接受建议:)

我的想法:

  • 我每次都可以轻松地抓取图表的几个级别(通过多次列出和扩展子项的过程递归),但是由于单击任何给定节点会加载完全不相关的数据,因此不能保证产生高比例的类似数据为根加载的数据。这似乎完全是浪费,实际上是朝相反方向迈出的一步——我最终会以这种方式进行更多处理!

  • 我可以轻松地维护已检索到的实体的哈希表,并在从服务器请求该实体的数据之前检查该列表。无论我实施何种缓存策略,我都可能最终会这样做,因为它是一种非常简单的减少查询的方法。

现在,你建议我如何缓存这些数据?

有没有什么超级有效的策略来做这种缓存?非常欢迎服务器和客户端选项。这个过程涉及大量数据,任何查询/处理的减少都让我领先于游戏。

谢谢!

0 投票
1 回答
1063 浏览

javascript - 突出显示一组节点及其之间的关系

我正在使用 D3 处理力导向图,并且我在图形区域旁边的单独表格中显示了图形中显示的所有节点。我在显示的表格中有复选框,这使我可以选择节点。

我试图突出节点和它们之间的关系。我一直从这个示例中获取指针Highlight selected node, its links, and its children in a D3 forcedirected graph。此示例适用于一个特定节点及其子节点,但如果它们之间有任何关系,我会尝试突出显示多个节点。

对此的任何帮助都将非常有用。

0 投票
2 回答
952 浏览

javascript - 使用 d3.js 强制布局定位节点时出现问题。节点“重新输入”每个数据更新,内部示例

几天前我曾问过这个问题,但我认为除了 paxRoman 之外的任何人都没有真正弄清楚我在问什么,因为没有一个例子很难描述。

然而,我们确实设法找出可能是我的问题,并且我设法将代码放在 bl.ocks.org 上,这样您就可以看到我的意思的示例!

这是示例: http ://bl.ocks.org/3020018

每次刷新数据(在本例中,只是从 json 文件中读取),所有节点都会重新创建并重新添加到绘图中。

我想要发生的事情

我希望节点在不移动的情况下更新。

如果新数组中存在一个新节点,它应该像现在一样出现,如果前一个数组中存在某些东西但新数组中没有,它应该简单地消失。

正如您在示例中看到的那样,这不是正在发生的事情,我无法弄清楚过去一周的原因。

所以我的问题是:

我实际上做错了什么?是我缺少链接吗?问题是什么?我们两个昨天花了一个多小时看这个,但无法理解,我已经花了一个星期的时间,但没有太大进展:/

我的旧问题/帖子仍然存在,但它的表述很糟糕,我没有例子可以展示。

谢谢你帮助我:)

0 投票
1 回答
523 浏览

d3.js - D3 力布局中心的宽度限制

我刚开始使用 D3,我目前有一个具有 5 个不同中心的力布局,并且我的节点基于数据属性围绕每个中心进行引力。理想情况下,五个组中的每一个都具有相同数量的节点,因此它们显示为大致均匀宽度的列 - 类似于此示例中的橙色组http://bl.ocks.org/1021953(如果您让它运行尽管)。

然而,我的一些组有很多节点,而另一些则没有,这导致一些集群比其他集群宽得多。是否可以设置一个最大宽度,超过该宽度,任何节点都不会从其中心向左或向右漂移,同时仍然让节点在中心上方和下方更自由地漂移?

或者我可以通过在每个组之间放置一列不可见的节点来适当地排斥它们来伪造它吗?

任何帮助深表感谢!

0 投票
1 回答
3023 浏览

javascript - 在 d3 中拖动事件的两个“调用”

我在 d3 中使用强制导向布局,但在开发中遇到了一些障碍。

基本上,我想向 force.drag 定义的“拖动”行为添加更多事件侦听器 - 即,我想确保节点在拖动时改变颜色(而不是在鼠标悬停时)。我能想到的唯一两种方法是以某种方式更改 force.drag 函数或定义新的拖动行为。

我不知道第一种方法是怎么做的,但是当我尝试第二种方法时,方法链接只会接受第二个拖动事件,而忽略第一个 force.drag 事件。

如何附加另一个拖动事件侦听器或修改现有 force.drag 以适应我要添加的新动画?

提前致谢