0

当程序的输入为

graph G {
  e
  subgraph clusterA {
    a -- b;
    subgraph clusterC {
      C -- D;
    }
  }
  subgraph clusterB {
    d -- f
  }
  d -- D
  e -- clusterB
  clusterC -- clusterB
}

预期的最终结果（使用 D3）可以在 -> http://graphviz-dev.appspot.com上看到，但与 node-node、node-cluster 和 cluster-cluster 的正确连接如本示例http:/ /www.graphviz.org/content/fdpclust

4

2 回答 2

2

如果我理解得很好，您想将边缘从一个集群绘制到另一个集群。这样做的方法是compound=true在图表的开头添加声明，并在要链接在一起的集群的两个节点之间绘制边，使用 和 将集群精确为边的头部和lhead尾部ltail。

你的代码应该是这样的：

graph G
{
    compound=true;
    e
    subgraph clusterA
    {
        a -- b;
        subgraph clusterC
        {
            C -- D;
        }
    }
    subgraph clusterB
    {
        d -- f
    }
    d -- D
    e -- d [lhead=clusterB]
    C -- d [ltail=clusterC, lhead=clusterB]
}

如果需要，您可以在这篇文章中获得更多信息：GraphViz - 如何连接子图？

于 2013-07-15T13:20:10.577 回答
1

派对迟到了，但是这里是你如何使用d3-graphviz和你的原始点和@Bastien Pasdeloup 的点来做到这一点。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.1.2/d3-graphviz.min.js"></script>
<div id="graph1" style="text-align: center;"></div>
<div id="graph2" style="text-align: center;"></div>
<script>

  var dot1 = `
graph G {
  e
  subgraph clusterA {
    a -- b;
    subgraph clusterC {
      C -- D;
    }
  }
  subgraph clusterB {
    d -- f
  }
  d -- D
  e -- clusterB
  clusterC -- clusterB
}
`;
var dot2 = `
graph G
{
    compound=true;
    e
    subgraph clusterA
    {
        a -- b;
        subgraph clusterC
        {
            C -- D;
        }
    }
    subgraph clusterB
    {
        d -- f
    }
    d -- D
    e -- d [lhead=clusterB]
    C -- d [ltail=clusterC, lhead=clusterB]
}
`;

  d3.select("#graph1").graphviz()
    .engine("fdp")
    .renderDot(dot1);

  d3.select("#graph2").graphviz()
    .engine("fdp")
    .renderDot(dot2);
    
</script>

于 2017-08-31T17:35:18.630 回答