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

当程序的输入是时，如何使用树/包/集群/集群兵力布局将元素自动定位到D3的网格中

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

如果我理解得很好，您需要绘制从一个集群到另一个集群的边。这样做的方法是在图的开头添加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-如何连接子图？

Sooooo派对迟到了，但以下是如何使用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>

相关内容

最新更新

热门标签：