标签: dagre

在看到dagre-d3 相当复杂的TCP状态图示例之后,我认为它能够解析类似复杂性的图表.在下图中,显然不是这种情况.如果交换了两个标记的节点,则将解析所有交叉.

另一件有趣的事情是,图表的解决效果似乎取决于我设置边缘的顺序.

以下代码

g.setEdge("148570019_1100", "148570020_1100", { label: "" });
g.setEdge("148570019_1100", "148570021_1100", { label: "" });
g.setEdge("148570019_1100", "148570010_1100", { label: "" });

不会给出与此相同的结果:

g.setEdge("148570019_1100", "148570010_1100", { label: "" });
g.setEdge("148570019_1100", "148570020_1100", { label: "" });
g.setEdge("148570019_1100", "148570021_1100", { label: "" });

看这两个例子:

• 完美的图形
• 乱糟糟的图

正如所建议的那样,我尝试使用cola.js,这就是相同的图形:

如你所见,colajs更适合减少交叉,但布局并不像dagre那样结构清晰.我对colajs使用以下设置:

cola.d3adaptor()
      .avoidOverlaps(true)
      .convergenceThreshold(1e-3)
      .symmetricDiffLinkLengths(20)
      .flowLayout('x', 150)
      .size([width, height])
      .nodes(nodes)
      .links(edges)
      .constraints(constraints)
      .jaccardLinkLengths(300);

是否有可能以一种使其看起来更结构化的方式配置colajs,类似于dagre？并且dagre根本无法解决这样的问题,或者是否可以以某种方式配置它？

我在用 Javascript 生成好看的家谱时遇到问题。

要求：

• 每个孩子都应该连接到树中的两个父母，而不是一些图中的一个
• 我喜欢配偶在树上彼此相邻（相同的垂直位置）
• 我想把节点按世代纵向组织起来，让你一眼就能看到同一年代出生的人。
• 随着时间的推移，一个人可以有多个配偶，每个人都有孩子
• 树中可以自由添加父子，不要只是“一人向上溯源”

我试过的最接近这个：

1. 使用Dagre作为布局引擎的Cytoscape JS，启用曲线样式：出租车边缘。

   （随机数据图表，实线为亲子关系，虚线为配偶）

   问题是配偶彼此不一致。Dagre 历来支持“等级”作为节点的参数，这意味着您可以强制某些节点处于特定高度（如果愿意，可以将其视为“一代”）。不幸的是，它不再起作用，负责的开发人员也不再从事该项目。这将很好地解决我的问题。

我尝试过但失败的其他事情：

1. 将 dagre 降级到支持排名的旧版本？

   还没有获得使用任何版本的 dagre 的等级。

2. D3与dagre-d3

   和上面一样的问题，因为dagre-d3是dagre的修改版本，这意味着它不支持按代排序。

3. yFiles 家谱演示看起来很棒，但很商业化。对于我的目的（希望任何人建立自己的家谱），单个开发人员许可证的成本是 26.000 美元（！？！）。显然不能接受。

   

我的问题

是否可以像我上面描述的那样垂直对齐我的 cytoscape/dagre 图中的节点？

如果没有，我愿意尝试其他库和其他布局算法。

我正在寻找一个看起来类似于 yFiles 解决方案但使用开源工具的工作示例。

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

import React from 'react'
import d3 from 'd3'
import dagreD3 from 'dagre-d3'

export default class D3Chart extends React.Component {
    constructor () {
        super();
    }

    componentDidMount() {
        // Create the input graph
        var g = new dagreD3.graphlib.Graph()
          .setGraph({})
          .setDefaultEdgeLabel(function() { return {}; });

        // Here we"re setting nodeclass, which is used by our custom drawNodes function
        // below.
        g.setNode(0,  { label: "TOP",       class: "type-TOP" });
        g.setNode(1,  { label: "S",         class: "type-S" });
        g.setNode(2,  { label: "NP",        class: "type-NP" …

我正在使用 cytoscape.js 创建一个图形，并且我在父节点内复合了节点。我想在节点顶部但在节点内部拥有主/父节点的标题。这在细胞景观中可能吗？

我曾尝试使用 halign 和 valign。每当我使用最高值时，它都会显示在框外。

是否有扩展或插件可以让我们这样做？

子节点示例：https : //stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts

我们目前正在构建一个Web 应用程序 (AngularJS)，它需要根据动态创建的数据绘制有向无环图（最多 1000 个节点，最多 10000 条边）。

一年多以来，我一直在寻找一个库/工具，它可以计算所需的布局并绘制可以设计样式、缩放和平移、交互式的图表（例如，在鼠标悬停时突出显示子项）。

Graphviz是产生最佳结果的工具，但它还没有真正准备好在网络服务器上使用（特别是因为我无法保证操作系统并且不想这样做）。

我尝试了dagre，它是d3 渲染- 我非常喜欢它，但它有两个主要缺点：1）它并不真正支持排名和聚类 - 这使得输出相当混乱；2）随着图形变得越来越大，其性能也会下降越来越令人无法接受。

接下来看起来真正令人信服的是cytoscape.js，因为输出看起来非常好，并且绘制更大的图形相当快（并允许进行一些性能调整）。但它的标准布局（例如 cose 或宽度优先）不会产生我们需要的输出。

从我目前的角度来看，有两个机会：

1) 使用dagre.js创建布局并使用cytoscape.js绘制结果（布局：“预设”，使用 dagre 布局中计算的节点 x 和 y）。但不支持这种方式的“化合物”/簇。

2）使用[viz.js]（https://github.com/mdaines/viz.js）（Graphviz的一个emscripted Javascript版本，在绘制图表时再次表现不佳）将结果计算为简单的输出格式和再次使用这个结果用cytoscape.js绘制它。

现在我的问题：

1）您还有其他想法如何实现它吗？

2）如果我的想法是正确的，你能给我一些关于如何理想地链接链条的提示吗？

（AngularJS -> REST 后端 -> JSON 到前端 -> 为 dagre 或 viz 重构 JSON -> 计算布局 -> 将结果输入到 cytoscape -> 在浏览器中渲染？！？）并且有机会在我的上进行布局计算Node.js 前端服务器而不是客户端本身（同样是由于性能）？

任何提示和想法都受到高度赞赏。

我愿意Dagre在我的HTML中使用.这是我的js代码:

var g = new dagreD3.graphlib.Graph()
                    .setGraph({})
                    .setDefaultEdgeLabel(function() { return {}; });
            var i = 0;
            var nodes = ["a", "b", "c", "d"];
            nodes.forEach(function (node) {
                ggg.setNode(node,{ style: "fill: #afa"});
            });
            g.nodes().forEach(function(v) {
                var node = g.node(v);
                // Round the corners of the nodes
                node.rx = node.ry = 5;
            });
            i = 0;
            for(i=0;i<3;++i) {
                g.setEdge(nodes[i],nodes[i+1],{label:"lable"});
            }
            var render = new dagreD3.render();
            var svg = d3.select("#mysvg"),
                    svgGroup = svg.append("g");
            render(d3.select("#mysvg g"),g);

结果是默认的垂直视图:

是否有可能通过这样使用它到水平视图Dagre？

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

我见过的最好的例子是一个非 D3 库（yworks），但它似乎要花费 1.5 万美元： 这是我见过的唯一一个仅引用 yworks 的相关 StackOverflow：Can I create a flow chart (no tree chart) using D3.js 也许这个 dagre-d3 示例也是：http : //jsfiddle.net/armyofda12mnkeys/9L50of2c /2/

var g = new dagreD3.graphlib.Graph().setGraph({});

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

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

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

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