问题标签 [dagre-d3]

我正在尝试绘制 y 轴坐标基于时间的图形布局 - 是否有任何已知的算法可以实现这一点？我研究了 dagre，但似乎排名系统完全基于网络中的边缘。

多个节点可能具有相同或相似的 Y 坐标，因此想法是水平间隔节点以避免节点重叠，同时保持平衡的布局。有点像附加的图像（未显示所有边缘）。根据 Reingold & Tilford 或 Sugiyama 算法，最好尽量减少重叠边缘。有任何想法吗？我已经尝试使用 D3 强制导向布局并固定 y 坐标，它确实有效（尽管有点跳跃），但这种方法的规模不会超过几百个节点。我需要处理最多 5000 个节点和 5000 个边，这意味着实际渲染很可能需要使用 html 画布而不是 svg。

更新：下面应该更好地了解我想要实现的目标（实际上需要一些边缘交叉，但这是一般的想法）。

以上可以从以下 JSON 生成：

我正在使用 d3 渲染一些东西，并使用d3.zoom鼠标进行缩放。它有效，但我还需要定期更改 svg 的内容（进行完整$('svg').html($('svg').html())调用，因为我的 SVG 包含 HTML）。

问题是当我这样做时，我失去了缩放状态。我试图通过存储缩放变换并在更新后重新应用它来跟踪它，但它不起作用。

这是我的尝试，使用 dagre-d3 示例图。

简而言之，这就是我正在做的事情：

我正在使用 Dagre 在前端为大约 700 个节点和 700 个边的图形生成图形坐标，目前生成大约需要 1.5 到 2 秒（这是在渲染之前）。我应该如何优化这个，有没有已知的方法来加速它？

例如，我已经知道图形是有向的、非循环的和拓扑排序的（在 API 中验证），所以可以以某种方式跳过这部分算法吗？

另一种方法可能是首先尝试减小图形的大小，方法是按照下图“聚类”封闭组（然后可以在 ui 中单击时展开）。任何已知的算法来实现这一点？

在 setNode 中，我们也可以指定 html。如果我提到宽度和高度，如果它是长文本，它正在移出。

我试图给 div 宽度，但它不工作示例小提琴

如何使文本适合节点内？

有没有办法改变节点的样式而不必重新渲染图形，就像下面的最后一个代码块一样？

DagreD3提供了出色的图形网络布局，并集成到 D3 以进行显示，但边缘箭头在旧 Web 浏览器（例如 IE11）中无法正确显示。箭头标记在 IE11 中显示，没有填充颜色。

使用 IE11 查看DagreD3 样式演示时可以看到这一点。缺少填充的箭头以红色圈出。

这是我的第一篇文章，希望有人可以帮助我解决这个问题......

您可以在 jsfiddle 示例中看到的内容是使用我正在使用的工具制作的。所有节点和边（链接）的定义都是由我们的工具生成的（“VAR STATES = ..”和“g.setEdge”等）（工具提示在这里不起作用，请忽略）

在选择“allnodes”（鼠标悬停）中，我只能选择当前节点（d3.select（this），但不能选择在SELECTIT中称为名称的对象）

我想要达到的目标：

1.）像这里的“鼠标悬停”效果：http ://cs.brown.edu/people/jcmace/d3/graph.html?id=small.json

我可以在“鼠标悬停”方法中选择影响节点名称：

-> dagrejs/graphlib 的 API 文档在这里找到：https ://github.com/dagrejs/graphlib/wiki/API-Reference

2.) 选择链接时的“鼠标悬停”效果（包括父节点和子节点）

jsfiddle：https ://jsfiddle.net/kraab/n9mgo74j/32/

提前致谢！

我有一个简单的图表如下：

但是必须svg像上面那样在 HTML 代码中硬编码元素吗？我不能动态插入吗？

现在我不知道如何在幕后工作d3和dagre运作，但是，据我所知，我不应该这样做！这是因为当我调用它时：

一旦上面的代码完成执行，（据我所知）一个svg元素被插入到文档中，并且与 HTML 代码中硬编码的元素相同......所以从现在开始应该不会有任何后续- 在两种情况之间执行 JS 代码？

然而事实并非如此。即使我svg在构造和（​​试图）插入图形之前插入元素，这也会失败：

我究竟做错了什么？如何将图形插入到动态构造的svg元素中？

我正在使用“D3”和“dagre”库创建一个带有嵌套节点的图形。

我想将节点“1 级”连接到“中级”，然后将“中级”连接到“3 级”。

但是当我使用“g.setEdge”时，出现以下错误：

无法设置未定义的属性“等级”

所以我想创建一个如下所示的问题流程图： 不确定最好的起点是……这是有向图吗？其中一些最终被真正隔开，并且看起来不太适合像这样的“流程”：https ://observablehq.com/@d3/force-directed-graph

我见过的最好的例子是一个非 D3 库（yworks），但它似乎要花费 15,000 美元： 这是我见过的唯一一个相关的 StackOverflow，它只引用了 yworks：我可以创建一个流程图（没有树形图）使用 D3.js 也许还有这个 dagre-d3 示例：http: //jsfiddle.net/armyofda12mnkeys/9L50of2c/2/

我想添加一些很酷的可选内容：

*我还希望能够控制 Circles 上的 css，比如根据该节点的数据，在某些情况下，有些会变绿或变红。

*每个边缘箭头我还想添加 onHovers 事件，所以会出现一个工具提示来显示实际规则，例如“if(Question1 == A || B)”

*使节点/边缘可拖动或“有弹性”（如果被拖动，它们会弹回原始位置）。听起来很花哨，但有时如果规则过于拥挤（因为智能自动布局），用户可能会使用此功能，并且他们想拖动东西以查看箭头指向的位置。