nodes and clusters and cluster-to-cluster links using D3

Question

How to auto position elements into a grid with D3 using a tree / pack / cluster / cluster force layout when the input to the program is

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

Expected end-result (using D3) can be seen at -> http://graphviz-dev.appspot.com but with proper connections to node-node, node-cluster, and cluster-cluster as seen in this example http://www.graphviz.org/content/fdpclust

I"m not sure if I understand what you're trying to do. Are you trying to get a graphviz-like static layout in D3? — Lars Kotthoff, Jul 14 '13 at 18:11
In short, I'd like to see a D3 example of this http://www.graphviz.org/content/fdpclust — Rayraegah, Jul 15 '13 at 10:09
A similar example of D3 is available, but unfortunately i'm not able to get my hands on it http://stackoverflow.com/questions/14571538/what-ever-happend-to-the-d3j-s-force-directed-graph-cluster-example-see-on-this — Rayraegah, Jul 15 '13 at 11:39

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

If I understand well, you want to draw edges from a cluster to another one. The way to do this is to add the compound=truedeclaration at the beginning of your graph, and to draw edges between two nodes of the clusters you want to link together, precising the cluster as the head and tail of the edge using lhead andltail.

Your code should then be like this:

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]
}

You have some more information in this post if needed: GraphViz - How to connect subgraphs?

edited May 23 '17 at 10:25

Community

1
1

answered Jul 15 '13 at 13:20

Bastien Pasdeloup

1,089
12
19

Oh, this actually helps since I parse the dot language into D3. – Rayraegah Jul 15 '13 at 14:28
I don't know anything about D3, so I won't be able to help with this, sorry. – Bastien Pasdeloup Jul 16 '13 at 10:54

score 1 · Answer 2 · answered Aug 31 '17 at 17:35

Soooooo late to the party, but here's how you can do this with d3-graphviz with both your original dot and with the dot from @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>

Just curious since I'm a JS newbie; which part is the "sweet ES6 syntax" part? — magjac, Sep 01 '17 at 05:19

nodes and clusters and cluster-to-cluster links using D3

2 Answers2