Question

当程序输入为

时，如何使用树/包/群集/群集强制布局将元素自动定位到网格中

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

预期的最终结果（使用D3）可以在 - ＆gt;处看到。 http://graphviz-dev.appspot.com但与节点 - 节点，节点集群和集群 - 集群有适当的连接，如本示例中所示http://www.graphviz.org/content/fdpclust

Answer 1

如果我理解得很好，你想要从一个簇到另一个簇绘制边。这样做的方法是在图形的开头添加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 - How to connect subgraphs?

Answer 2

Soooooo迟到了，但是你可以用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>

使用D3的节点和集群以及集群到集群链路

2 个答案: