标签: dagre-d3

我试图使用d3.js绘制有向无环图.在搜索布局时,我遇到了Dagre,但由于我不想在任何地方使用基于DOT的代码,因此它似乎没什么用处.如果有人知道DAG的纯Javascript解决方案或插件/自定义布局,请告诉我.提前致谢.

我用dagre绘制有向图,但我试图理解svg,d3,dagre和graphlib是如何相互依赖的？基本上,一个人停下来,另一个人开始.

我会尝试用我有限的理解指出我能收集到的东西.

1. svg :(是一种基于XML的矢量图像格式,但基本上是它)是一个html标签,使用它可以绘制圆形,椭圆形,矩形等,然后使用g元素分组两个或多个形状并应用变换等.

2. d3:d3是一个javascript库,它基本上允许你将数据与svg结合起来.因此,不是每次都编写svg标记,而是基本上使用编程,循环,数据等并创建svg代码.

   现在来到dagre,dagre-d3和graphlib是我有一个问题,假设我上面所说的任何事情都有意义:)

3. dagre,dagre-d3:这是dagre页面所说的" Dagre是一个JavaScript库,可以很容易地在客户端布置有向图.dagre-d3库作为dagre的前端,提供实际渲染使用D3. "

   有人可以向我解释一下吗？那么我可以在dagre,dagre-d3中使用d3函数吗？嗯......我已经很困惑了,你能用一个例子来解释这些是如何共存的吗？这个代码片段让我思考:

   var oldDrawNodes = renderer.drawNodes();
   renderer.drawNodes(function(graph, root) {
     var svgNodes = oldDrawNodes(graph, root);
     svgNodes.each(function(u) { 
        d3.select(this).classed(graph.node(u).nodeclass, true); 
     });
     return svgNodes;
   });
   

   Run Code Online (Sandbox Code Playgroud)

   这里,drawNodes是dagre-d3的一个函数,但是它被覆盖了,我们在它里面传递了一个d3函数(d3.select(this).classed).嗯......这是怎么回事？我认为d3.select只能用于html元素吗？这是什么'这个'？

4. graphlib:这是graphlib页面,它表示它为多图形提供数据结构.但我的意思是,这些库是为d3还是为dagre-d3构建的？

我知道我听起来很困惑,但你明白了!如果有人可以向我解释一下如何将这些相关以及哪些功能可以在哪些内部使用,我将能够接受.

谢谢.

我是一名大学合作社,目前正在为我的团队开发一个网页项目.一开始,我选择使用dagre-d3库来构建图形,它们在Chrome上运行良好.然后我意识到SVG中的ForeignObject元素不能用于IE(它恰好是支持的主要浏览器).

由于我的目标主要是在每个图形组件中填充HTML内容,我想知道是否有任何解决方法在IE上仍然使用dagre-d3实现这一点.或者对不同图库的任何建议？

更新:

基本上我想创建下面屏幕截图中显示的图表:

下面是我现在使用dagre-d3构建图形的代码:

HTML代码段:

<div id="graph-section">
    <svg>
        <g transform="translate(20,20)" />
    </svg>
</div>

JS片段:

var g = new dagreD3.Digraph();

// Construct nodes
for (var i = 0; i < data.nodes.length; i++) {
    var label = "<div class='graphLabel'>";
    label += "<div class='comp" + data.nodes[i].value.type + " left'>&nbsp;</div>";
    label += "<b>&nbsp;" + data.nodes[i].value.name + "</b><br/>";
    label += "<span class='info'>Start: " + data.nodes[i].value.start + "</span><br/>";
    label += "<span class='info'>End: " + data.nodes[i].value.end + "</span><br/>";
    label += "<span class='info'>Launched by " + data.nodes[i].value.user …

在看到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根本无法解决这样的问题,或者是否可以以某种方式配置它？

我正在尝试使用dagre-d3创建DAG .这些DAG的数据来自数据库,每个DAG都有所不同,因此,在将所有节点和边添加到图之前,我不知道给出包含svg的宽度/高度.

理想情况下,我会d3.select("#svg1").resize_to_match_contents()在添加所有节点和边之后调用类似的东西,以确保所有节点都可见且svg不是太大.当然没有这样的功能,我也不知道如何实现它.我知道我可以调用d3.select("#svg1").attr("height", "10")设置高度,但不知道如何检索/计算<g>SVG内元素的高度.

我在用 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库(4.11).如果有人能够找到最新版本的问题,那也会有所帮助.谢谢

我正在使用Dagre d3绘制一些图表.

当我最初渲染我的图表时,我做到了

g = new dagreD3.graphlib.Graph()
          .setGraph({})
          .setDefaultEdgeLabel(function() { return {}; });
var svg = d3.select("svg"),
            inner = svg.select("g");
            svgGroup = svg.append("g");
var render = new dagreD3.render();

        render(d3.select("svg g"), g);

        var zoom = d3.behavior.zoom().on("zoom", function() {
              inner.attr("transform", "translate(" + d3.event.translate + ")" +
                    "scale(" + d3.event.scale + ")");
              currentZoomScale = d3.event.scale;
              currentPosition = d3.event.translate;

            });
        svg.call(zoom);

然后,当用户点击某个节点时,我想将HTML附加到该节点的标签上.除非我重新渲染图形,否则这不显示,我使用以下内容:

g.node(id).label += "<div>" + inputTemplate + "</div>";

var zoom = d3.behavior.zoom()
        .scale(currentZoomScale)
        .on("zoom", function() {
        inner.attr("transform", "translate(" + d3.event.translate + …

我正在使用 dagre-d3.js 创建分层图。现在我需要使节点可点击并执行功能。我无法做到这一点。

当前我的一些代码看起来像

var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode("TEST", { label: "TEST"})
g.setNode("TEST1", { label: "TEST1"})

g.setEdge("TEST", "TEST1", { label: "open", style: "stroke: green; stroke-width: 2px;fill: none", arrowheadStyle: "fill: green" });

var svg = d3.select("svg"),
inner = svg.select("g");

var render = new dagreD3.render();
render(inner, g);
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);

我只需要能够单击 TEST 或 TEST1 并运行我编写的函数以转到页面上具有相同名称的 div(TEST, TEST1)

我已经看过这个，但这对我没有帮助。 https://github.com/cpettitt/dagre-d3/issues/13 此外，这似乎使用了我无法使用的不同方法。

请指导我

谢谢，尼希尔

我创建了一个简单的 Dagre 示例，用于在单击图中的现有节点时动态添加节点。但是，重新渲染会在同一层内创建不同的相对顺序。无论如何，这个问题有解决办法吗？

小提琴可以在这里找到： http: //jsfiddle.net/gke2dann/

提前致谢。

// Create a new directed graph
var g = new dagreD3.Digraph();

/* populate graph... see fiddle */

var renderer = new dagreD3.Renderer();
var layout = dagre.layout();

var render = function() {
    layout.run(g);
    renderer.run(g, d3.select("svg g"));
};

render();

svg.onclick = function(evt) {
    var nodeId = evt.target.__data__;
    for (var i = 0; i <= Math.random() * 10; ++i) {
        var newNodeId = nodeId + "_sub" + i;
        g.addNode(newNodeId, { label: "Bla" });
        g.addEdge(null, newNodeId, nodeId); …

节点是否不与边缘重叠？我将dagre d3用于该图。对于节点，我使用引导程序。如果无法自动完成，该如何手动执行？这是一个示例图。我需要一个通用解决方案，而不是专门针对Fiddle / Image中的图形。 JS小提琴

var g = new dagreD3.graphlib.Graph().setGraph({});
  for (var i = 0; i < 7; i++) {
    var html = '<div class="panel panel-primary">'
    html += '<div class="panel-heading">' + i + ' Panel</div>'
    html += '<div class="panel-body"><p style= "color: black;">Test<p></div>'
    html += '</div>'
    g.setNode(i, {
      labelType: "html",
      label: html,
      padding: 0
    })
  }
  g.setEdge(0, 1, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(1, 2, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(0, 2, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(2, …