问题标签 [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.
node.js - 如何在 NodeJS 中使用 Dagre
在使用 NPM 安装 Dagre 后,我试图在 Node 中使用 Dagre(按照 Dagre wiki 上的文档)。为什么这不起作用?
svg - 使用 dagre 自定义形状的位置
我正在尝试创建一个自定义形状并在 svg 上设置 x 和 y 轴,到目前为止我已经完成了,但是在我的元素之上,我有一个属于引用节点的组 (g) 的变换属性,我试图更改设置自定义转换的属性,但没有任何运气。
我的问题是,如何更改整个节点的 x 和 y 位置?
用于生成节点:
翻译是 65,152,我想与对象的 x 和 y 相同,我还想更改子组(包括标签的包装器)。
查看图片以供参考
javascript - 通过函数指定节点的样式
在 d3 中,我能够使用函数指定元素的填充样式。例如
有没有办法在 dagre-d3 中做同样的事情?
我试过了
cytoscape.js - cytoscape.js 中简单树的 Dagre 布局
如何在 cytoscape.js 中使用 dagre 布局来绘制一棵简单的树。我正在放置 layout{ name: 'dagre'} 并从https://github.com/cpettitt/dagre/blob/master/dist/dagre.js添加了 dagre.js 文件。它不工作。
javascript - 使用 Dagre-D3 绘制 ERM
我尝试使用 Dagre-D3 创建 ERM。关系应直接显示在实体属性之间。(见截图)。通过对父节点中的属性进行分组,我就可以了,但是 dagre graphlib 中的一些算法将属性节点分开以保持链接简单。我不介意有稍微复杂的链接,但将属性保持在一起......
为了说明我想要做什么,我创建了一个 jsFiddle: ERM with dagre-d3
这是屏幕截图:
jointjs - 达格勒。如何设置画布宽度?
我尝试使用dagre库绘制JointJs UML 图。据我了解 dagre 解决空间中分布节点的问题。我有自定义数据集。第一步,我创建 dagre 布局以生成节点的 X 和 Y 坐标。然后我从初始创建新数据集以匹配 JointJs 要求,设置从 dagre 布局获得的 X 和 Y 坐标并渲染它。所以结果你可以在这里看到。第一个图用dagre-d3渲染,第二个用 JointJs 渲染。我不喜欢这两种变体并且有两个问题:
- 如果“行”上的总宽度大于容器宽度,如何设置图形容器的宽度以确保 dagre 对其进行说明并将节点移动到底部?两个库都尝试在 600x800 的画布上绘制图形,因此下面有足够的空间。
如何像第一个图表一样在顶部和左侧的 JointJs UML 图表中删除 svg 边框和 UML 图之间的偏移量?
code available here http://jsfiddle.net/zeleniy/mpa6b47k/
cytoscape.js - 使用 cytoscape 的 dagre 不起作用
如何在 cytoscape.js 中使用 dagre 布局来绘制一棵简单的树。我正在放置 layout{ name: 'dagre'} 并添加了 dagre.js 但不起作用。使用 arbor.js 它可以工作,但我想使用 dagre 查看树结果。我是 javascript 的新手。非常感谢和对不起我的英语!我的代码:
javascript - d3js 中使用 dagre-d3 或 colajs 的流程图
在看到 dagre-d3 相当复杂的TCP 状态图示例后,我认为它能够解析类似复杂度的图。在下图中,显然不是这种情况。如果两个标记的节点被交换,所有的交叉都将被解决。
另一个有趣的事情是,解决图形的好坏似乎取决于我设置边的顺序。
以下代码
没有给出与此相同的结果:
看这两个例子:
正如建议的那样,我尝试使用cola.js,这就是同一张图的样子:
如您所见,colajs 在减少交叉点方面做得更好,但布局不像 dagre 那样结构化和清晰。我对 colajs 使用以下设置:
是否可以配置 colajs 使其看起来更有条理,类似于 dagre?dagre 是否根本无法解决这样的问题,或者是否有可能以某种方式对其进行配置?
javascript - 在 Web 应用程序中绘制有向无环图 - 只有奇怪的方法可用?
我们目前正在构建一个Web 应用程序 (AngularJS),它需要根据动态创建的数据绘制有向无环图(最多 1000 个节点,最多 10000 条边)。
一年多以来,我一直在寻找一个库/工具,它正在计算所需的布局并绘制一个可以设置样式、缩放和平移、交互式的图形(例如,在鼠标悬停时突出显示孩子)。
Graphviz是产生最佳结果的工具,但它还没有真正准备好在网络服务器上使用(特别是因为我不能保证操作系统并且不想这样做)。
我尝试了 dagre,它是d3 渲染——我非常喜欢它,但它有两个主要缺点:1)它并不真正支持排名和聚类——这使得输出相当混乱;2)随着图表越来越大,它的性能越来越不能接受。
接下来真正令人信服的是cytoscape.js,因为输出看起来非常好,而且绘制更大的图表也相当快(并允许进行一些性能调整)。但它的标准布局(例如 cose 或广度优先)不会产生我们需要的输出。
从我目前的角度来看,有两个机会:
1) 使用 dagre.js 创建布局并使用cytoscape.js绘制结果(布局:'preset',使用来自 dagre 布局的节点计算的 x 和 y)。但是这种方式不支持“化合物”/集群。
2) 使用[viz.js] ( https://github.com/mdaines/viz.js)(Graphviz的脚本化 Javascript 版本,在绘制图形方面表现不佳)将结果计算为普通的输出格式和再次使用此结果用cytoscape.js绘制它。
现在我的问题:
1)你有另一个想法如何实现它?
2)如果我的想法是正确的,你能给我任何关于如何理想地链接链条的提示吗?
(AngularJS -> REST 后端 -> JSON 到前端 -> 为 dagre 或 viz 重构 JSON -> 计算布局 -> 输入结果到 cytoscape -> 在浏览器中渲染?!?)并且有机会在我的node.js 前端服务器而不是客户端本身(再次由于性能)?
任何提示和想法都会受到高度赞赏。