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

Question

当程序的输入是

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 看到，但与节点节点、节点集群和集群集群的正确连接如本示例 http://www.graphviz.org/content/fdpclust 所示

Answer 1

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

你的代码应该是这样的：

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

派对迟到了，但是您可以使用 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>