问题标签 [dagre]

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 投票
2 回答
2683 浏览

d3.js - 使用 Dagre-D3 反应组件未正确绘制

我将这个Dagre-D3演示转换为 React 组件。代码如下。

问题是节点的渲染未对齐并且它们的大小也是如此。

这就是它的样子。它应该如何在这里

更新:

这是第一个节点的样子:

在此处输入图像描述

现在怎么办:

应该是什么:

宽度和高度计算不正确。宽度应该是 49,但它只有 20。

0 投票
0 回答
787 浏览

javascript - JointJS,为自定义形状定义端口,但它们没有显示在图表上

在 JointJS(和 Dagre 布局库)中实现交互式流程图时遇到一些问题。

我的第一个问题:使用以下代码创建带有端口的自定义 JointJS 元素时,除非我注释掉“类型:”定义,否则端口不会定义或显示在图表上。我注释掉那一行,端口就出现了。

0 投票
1 回答
469 浏览

javascript - JointJS 无法连接端口,说“getPortSelector”不是函数

我在 JointJS 中的自定义元素上连接端口时遇到问题。我使用以下代码定义元素:

然后尝试使用以下代码链接它们:

但我收到一条错误消息,说“getPortSelector”不是函数。有任何想法吗?提前谢谢了!

0 投票
1 回答
1235 浏览

javascript - 将节点动态添加到 JointJS 图。在joint.layout.DirectedGraph中设置排名顺序?

我在 JointJS 中实现了一个流程图,用户可以在其中删除元素以及添加新元素,并以各种顺序重新链接事物。每次删除、添加、取消链接或重新链接某些内容时,该图正在使用 Joint.layout.DirectedGraph 库和 Dagre 的自动布局功能来重新组织图。出现了一个奇怪的问题,我还不确定如何处理它。

假设我有一个“分叉”进程,它有两个输出端口,每侧一个,顶部有一个输入端口。根据数组中元素的顺序,自动布局有时可以将左侧端口的子元素放置在右侧端口的子元素的右侧,因此生成的链接是交叉的。

是否有一些直接的方法来影响布局中的排名顺序?我希望当事情发生变化时我可以对数组中的元素重新排序,这样从 Dagre 的角度来看它们更容易处理,但我不确定排序在实践中的实际效果。更好的是一些类似于 az index 的属性,但对于我可以设置的从左到右的偏差,Dagre 会尊重,但我不相信这样的事情隐藏在代码中。

有没有人有一些想法或建议我可以如何清理布局以消除此类事件?

提前谢谢了!

0 投票
0 回答
331 浏览

javascript - 如何使用 digraph 或 D3 创建可折叠

我想使用 dagre.js 创建可折叠的有向图。但它会生成没有点击事件的静态图。当用户单击图形节点时,我想切换节点的子节点。

任何帮助将不胜感激..

0 投票
1 回答
2521 浏览

javascript - 使用 dagre 布局调整 cytoscape.js 中的形状大小

我正在尝试将节点的形状调整为节点文本的大小。我按照https://github.com/cytoscape/cytoscape.js/issues/649的说明进行操作。然而:

  1. 形状总是以高度 = 宽度结束
  2. 所有形状的大小都是一样的。
  3. 形状大小似乎达到了无法增长的最大值。

(我不确定这是否与 dagre 布局有关。)

我将以下库与 dagre 布局一起使用:

  • cytoscape.min.js
  • dagre.min.js
  • cytoscape-dagre.js

    /li>
0 投票
3 回答
4159 浏览

javascript - dagre-d3 js 缩放适合所有内容

我正在使用基于 d3.js 的 dagre-d3。渲染图表后,我希望它缩放以适应所有内容,并且它必须居中。

如您所见,我可以将其居中,但由于我的身高为 400,我似乎无法容纳所有内容。

请注意,我想要一个应该可用于其他 dagre 情况的解决方案,例如在这种情况下仅缩放到 0.5 就可以,但这不是我想要的。

JSFIDDLE: https ://jsfiddle.net/bababalcksheep/xa9rofm5/8/

代码:

0 投票
1 回答
1213 浏览

javascript - 在 D3.js 中更改节点的标签数据而不渲染图形

我想使用 d3.js 更改 svg 图节点的标签而不再次渲染它。我不想一次又一次地生成图表,而只想更改节点标签中的数据。

似乎如果我更改标签值,我需要再次调用“renderer”来再次绘制图形:

0 投票
1 回答
252 浏览

layout - Cytoscape.js:鼠标选项卡后重新计算图形布局

类似于这个原型http://jsfiddle.net/g5f16erz/我使用 Cytoscape.js 使用 dagre 布局创建交互式有向无环图。

特别是以下代码用于折叠和展开节点:

每次节点折叠或展开时,有没有办法重新计算图形的布局?

提前致谢

0 投票
1 回答
1630 浏览

javascript - 仅在节点子集上布局 DirectedGraph (dagre)

我正在寻找一种使用 JointJS / Rappid 图表库仅布局有向图节点子集的方法。

我需要图表中的一些“固定”节点并布置“其他”节点,假设它们可以相互连接或与一些固定节点连接(图表已经添加到论文中)。

由于joint.layout.DirectedGraph.layout必须在图形对象上使用 API,我想知道在布局计算期间是否有任何机制可以“固定”图形的某些节点(例如,在单元对象中添加一些属性)。类似这样的东西也可以,但是 getSubgraph API 不应检索传入和传出链接

查看文档我无法识别这种功能。如果不支持此功能,还有其他方法可以用来实现我的目标吗?(当然我也可以布局整个图表并在操作结束时应用我的固定和弦,但我正在寻找比这更好的东西)。