问题标签 [graph-visualization]

我有以下使用D3.js库绘制树的 JavaScript 代码（它遵循可以在各种在线教程中找到的标准结构）：

JSFIDDLE

它工作得很好，除了一个顶点有奇数个孩子（1、3、...）的树；在这种情况下，不会绘制奇数顶点的边（例如，在上面的示例中，不显示 A 和 B 之间的边）。我错过了什么？

我正在尝试将数组索引映射到 d3.js 中的时间范围，因为我没有数组的单独日期 - 我只知道值在 1900 到 2000 之间。

有没有比手动计算每个数组值的日期更聪明的方法？也许计算步长并递增？

我有 42 个变量，我已经在 Matlab 中计算了它们的相关矩阵。现在我想用一个模式球来可视化它。有没有人有任何建议/经验如何在 Matlab 中完成？以下图片将更好地解释我的观点：

在图片中，变量之间的每条抛物线都意味着它们之间的相关强度。线越粗，相关性越高。我更喜欢图 1 的风格，而不是图 2 中的风格，我使用不同的颜色来突出相关性的强度。

使用 Highstock (Highcharts) 库，我想知道如何将A)添加标志（或参见图 1）与B)使用addPoint函数（例如：参见此处）动态更新数据。addPoint函数中似乎没有它的功能。series.addPoint([x, y], true, true)

图。1

我看过这个SO question。但是似乎在现有数据集上添加了一个标志。我可以同时添加一个数据点和一个关联的标志吗？

任何帮助表示赞赏。

谢谢

=== 编辑 ===>

@Sebastian-Bochan

感谢您的回复，以及工作示例。但是，由于某种原因，addPoint不适用于我的设置。

所以看看这个jsfiddle。我所做的是 i) 通过调用来设置初始图形(chart-fill …)，然后 ii) 调用(chart-increment …)增加 1 个点，然后立即尝试在该点上添加 1 个标志。不工作的部分是(-> ($ selector) (.highcharts) (.-series) (nth 9) (.addPoint { :x 1234567 :title "fubar"} true false)). 这并没有像我期望的那样添加标志。

我有 11 个系列覆盖在 5 个图表之上。这包括一系列类型的“标志”。我想，也许有这么多系列，引用其中一个有问题。但如果我查看我的系列，我可以看到这面旗帜确实是第 9 面。

我也在使用 Clojurescript 代码。但我不认为这是一个问题，因为图表可以正确呈现。有任何想法吗？

我正在研究 D3 网络可视化并尝试调整布局。节点代表大学课程，边连接先决条件（例如，如果课程 A 是课程 B 的先决条件，则存在从 A 到 B 的有向边）。还有代表“AND”和“OR”的小节点...例如，如果您需要课程 A 或课程 B 来完成课程 C，则将有从 A 和 B 指向“OR”节点的边，以及从“OR”节点到 C 的边。这些网络是根据用户选择的课程集动态生成的，因此节点的数量可以从少数几个到几百个不等。

课程节点可以按年份（1、2、3 或 4）分类。现在我将 SVG 分成四个水平带，在我的tick()函数中，我检查每个节点是否在正确的带中，如果不是，则将其推向正确的方向。这种方法可以保持从上到下的“流动”，但节点经常会卡在其他节点后面，永远无法到达正确的位置。

我也不希望节点在最终网络中重叠，所以我使用碰撞检测来始终保持它们之间的一些空间。

这些有所帮助，但我仍然对我得到的布局不太满意。根据数据的性质，边缘应始终指向侧面或向下，但不能向上（即，第一年或第二年课程可以成为第二年课程的先决条件，但第三年课程不能）。它不是真正的树，但它有一些方向。有没有办法实现这个约束？我尝试了力导向的树方法，但是即使增加常数，约束也不够强 - 它只是轻轻地朝正确的方向轻推，但是如果节点因为其他一些力而“卡住”，那么它们停止。我觉得如果我让箭头方向成为“最强”的约束（比电荷排斥、重力等更强），那么节点会更好地组织自己。

这是我第一次使用 D3，并且已经做了很多事情（D3 力布局的内置参数、按年组织和碰撞检测），因此非常感谢任何输入！

编辑：

我尝试在tick处理边缘的函数部分添加它：

我的想法是，如果目标高于源，我可以强迫他们两个在中间相遇。这有点工作，但是在碰撞检测与它冲突的地方有点错误 - 当两个节点发生碰撞时，它们应该分开，但如果它们之间的边缘指向上方，它们可能会被推到一起。这导致一些节点奇怪地弹跳。它还使某些箭头末端不附加到节点上。对于如何解决这个问题，有任何的建议吗？

编辑＃2：

我仍在使用我在上次编辑中添加的代码，但我已经删除了按年份将节点分成层的代码。我还将它添加到我的“碰撞”函数中以进行碰撞检测，并将 alpha 值传递给它：

这使得碰撞检测约束在布局末尾附近更强。这很好，因为它可以防止节点在到达漂亮布局的过程中“卡住”，而且我不在乎它们在移动时是否重叠，只要它们在最终布局中重叠。我对这给我的布局感到相当满意，它似乎已经解决了大部分“颠簸”。但是，如果有人有其他想法，请分享！

我试图使用 D3 绘制图形的多级层次结构。想法是：对于图，我有多级集群（级别 0 是图的顶点集，级别 1 是在级别 0 节点上完成的聚类，级别 2 是在级别 1 节点上完成的聚类，依此类推），因此多级集群部分是一棵树，而 0 级节点形成一个图。
我想将树部分显示为可折叠（到相关集群），但仍显示 0 级节点之间的边缘。就像其中的橙色节点可能在它们之间有边缘一样。
有没有人尝试过这个？任何想法我怎样才能做到这一点？

我试图让我的 D3 网络在它达到一个不错的布局（alpha 达到 0）后冻结。我希望力完全停止，即使拖动节点（用户应该能够手动重新排列节点）。我想我知道如何通过修改节点的 mousedown 和 mouseup 调用的函数来完成第二部分。但是，我无法让原始布局和冻结工作。

我查看了“静态”强制布局的示例，其中网络仅在布局完成后显示。但是，我希望网络在达到稳定布局时显示。我将此添加到绘制网络的函数的末尾：

通过此添加，网络在到达force.stop(). 有谁知道如何让它在“滴答”时显示？

编辑：这是我的tick功能实现：

我已经能够使用力布局构建一个力有向图。大多数功能都很好用，但我遇到的一个大问题是，在开始布局时，它会在整个页面（进出画布边界）反弹，然后再定位到画布上的位置。

我尝试使用 alpha 来控制它，但它似乎不起作用：

有谁知道如何正确控制强制布局进入其 SVG 画布？

我不介意图表漂浮并缓慢稳定，但整个图表的疯狂反弹根本不吸引人。

顺便说一句，力有向图示例可以在以下位置找到：http ://bl.ocks.org/Guerino1/2879486在此处输入链接描述

谢谢你尽你所能的帮助！

这个例子的描述：http: //bl.ocks.org/mbostock/4062045（见下图），声明它是“带电粒子和弹簧的物理模拟，使相关角色更接近。”

我只是好奇该代码的哪一部分（在同一页面上）实现或定义了弹簧力，尤其是基于相关字符？

我问这个是因为我的印象是 D3.js 没有为 Force 定向布局实现弹簧力，如其 API 文档中所述：

“链接不是作为“弹簧力”实现的，这在其他力导向布局中很常见，而是作为弱几何约束。” - https://github.com/mbostock/d3/wiki/Force-Layout#wiki-linkDistance

我正在使用程序编写graphviz文件并png使用点生成图形。有时我最终会得到一个甚至无法加载的大文件eog（gnome 之眼）。由于我的图表只有黑白，我想知道-T在使用dot生成图形时应该传递什么选项以使尺寸最小化并且我仍然可以放大和缩小而不会丢失太多。