How to make sense of id and title? - d3.js

I would like to identify my nodes via Javascript and hence ensure that each element (graph, node, edge) has a unique ID.
I found the https://github.com/magjac/d3-graphviz#maintaining-object-constancy section and thought that.keyMode('id') would tell d3-graphviz to use my IDs. But ids are still using the graph ID and don't seem to use the node ID. I found instead a title attribute from this example: https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f
What is this attribute? Can I be sure that it is the ID I am looking for? What is the relationship in D3-graphviz between id and title?
EDIT
I tried to dig and came up with this simple Example.
I have this (autogenerated) input file:
digraph {
label=""
id="g1"
n1 [id="n1", label="First Node"]
n2 [id="n2", label="Second Node"]
n1 -> n2 [id="e1", arrowHead="normal", arrowTail="dot"]
}
I get this outcome:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="134pt" height="116pt" viewBox="0.00 0.00 133.59 116.00">
<g id="g1" class="graph" transform="translate(4,112) scale(1)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 129.59,-112 129.59,4 -4,4"></polygon>
<!-- n1 -->
<g id="n1" class="node">
<title>n1</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-90" rx="52.16" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-85.8" font-family="Times,serif" font-size="14.00">First Node</text>
</g>
<!-- n2 -->
<g id="n2" class="node">
<title>n2</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-18" rx="62.59" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-13.8" font-family="Times,serif" font-size="14.00">Second Node</text>
</g>
<!-- n1->n2 -->
<g id="e1" class="edge">
<title>n1->n2</title>
<path fill="none" stroke="black" d="M62.8,-71.7C62.8,-63.98 62.8,-54.71 62.8,-46.11"></path>
<polygon fill="black" stroke="black" points="66.3,-46.1 62.8,-36.1 59.3,-46.1 66.3,-46.1"></polygon>
</g>
</g>
</svg>
but when I programmatically in an mouse event that provides me the <g> for a node, then I get the ID: svg-0.g1.n2
The last bit created the confusion. I need to find the attribute value, and not a connected value. But that will work. Thanks!


The underlying Graphviz language provides an id attribute (https://www.graphviz.org/docs/attrs/id/). Based on the d3-graphviz consistency text, it looks like d3-graphviz will honor this id attribute.

Related

SVG image with clip-path not clipping properly

I am trying to add a clipping mask to set of images on SVG. But the images are not showing properly.
<g *ngFor="let node of nodeList" [attr.transform] = "'translate(0,1460) scale('+node.scalingFactor+' '+node.scalingFactor+')'" [attr.transform-origin]="''+node.x+' '+node.y+''" >
<clipPath [attr.id]="'imageclip_' + i">
<circle shape-rendering="optimizeSpeed" r="60" [attr.cx]="node.x" [attr.cy]="node.y" stroke="black" stroke-width="0" fill="black" />
</clipPath>
<image style="cursor: pointer;" [attr.clip-path]="'url(#imageclip_' + i + ')'" height = 120 [attr.x] = "node.x" [attr.y] = "node.y" transform="translate(-45 -60)" [attr.href]="node.imageUrl" />
</g>
But when I inspect on google chrome, it shows all the elements are in correct places. But the images are not displaying properly.
What can I do to display the images properly.

I found the problem after a little while. I have missed to define the i in the id of clip path. After I defined it, problem sorted. Final solution is here.
<g *ngFor="let node of nodeList; let i=index" [attr.transform] = "'translate(0,1460) scale('+node.scalingFactor+' '+node.scalingFactor+')'" [attr.transform-origin]="''+node.x+' '+node.y+''">
<clipPath [attr.id]="'imageclip_' + i">
<circle shape-rendering="optimizeSpeed" r="60" [attr.cx]="node.x" [attr.cy]="node.y" stroke="black" stroke-width="0" fill="black" />
</clipPath>
<image style="cursor: pointer;" [attr.clip-path]="'url(#imageclip_' + i + ')'" height = 120 [attr.x] = "node.x" [attr.y] = "node.y" transform="translate(-45 -60)" [attr.href]="node.imageUrl" />
</g>

Why does the SVG animation stop when using xlink:href for external file

For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?
According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>

In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement

d3.js label inside path deformed

i added a label inside a path successfully but when i try to center this label by changing manually x and dy attributes. the label deforms in the center.
here is some picture and its corresponding code.
before changing the x attributes its value 135:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
after changing the x attributes new value is 145:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>

There is nothing "deformed" here. That's the expected behaviour: you're using a textPath to position the text, and the path you're referencing changes orientation at the first L command.
You can clearly see that there is nothing wrong when we draw some (red) lines, showing this "bend":
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
And you can see that even better if we create several texts, increasing the dy up to your value (105):
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
Possible solution: alternatively, you can draw a curve. That way, the text will follow the path without breaks:
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>

Aligning Subgraphs, Ordering Nodes, and Relocating Edges in Graphviz

I'm trying to draw a GraphViz graph (using version 2.38.0 (20140413.2041)), and having a lot of trouble getting it to lay out the way I want it. I've tried many different combinations of hidden edges, constraint manipulation, subgraphs (both cluster and non-cluster), etc., and nothing seems to be doing what I want.
Here's my current code:
digraph G {
subgraph clustera {
style=invis;rank=same
A->B->C
}
subgraph clusterb {
style=invis;rank=same;rankdir=LR
D->E [constraint=false]
}
subgraph clusterc {
style=invis;rank=same
F->G [constraint=false]
}
C -> D
D -> F [constraint=false]
E -> C
F -> A [constraint=false]
F -> C [constraint=false]
F -> E [constraint=false]
}
And here's how it renders with dot -Tpng:
(All the F edges have "constraint" turned off, because almost anything else distorts the graph horribly.)
What I want is:
node F above node G
F and G more or less centered vertically on the graph
F and G to the right of A through E
A through E in more or less the arrangement they're in now
the edges from F to A, C, and E, and from D to F, following more or less straight lines (i.e. not routing around the right-hand side of the F/G group)
as a bonus, I'd kind of like to get A through C to center properly above D and E, but that's less important
(One thing I very much don't want is for F to appear above A, as if it were the root of the graph.)
Here's an approximation of what I'm looking for, laid out by hand in yEd:
Is this doable in GraphViz?
(I should note that I'm perfectly willing to use one of the other GraphViz tools, it's just that dot is the only one I'm at all familiar with.)

Here's my approach without subgraphs and weigths, only groups to vertically align nodes, and constraint=false as well as dir=back to preserve layout distortion.
digraph G {
// nodes without a group
D;
E;
// group left side
node[group=left];
A -> B -> C -> D;
C -> E [dir=back];
D -> E [constraint=false];
// group right side
node[group=right];
F -> G;
// inter group edges
F -> C;
edge [constraint=false];
D -> F;
F -> A;
F -> E;
}
The result can be seen here and corresponds to your approximation.

Interpreting your requirement with a little freedom you may have a graph without edges crossing
digraph G { rankdir = LR ranksep = 1.2 nodesep = 0.5
{ rank=same A -> B -> C -> D -> E }
D -> F
{ rank=same F -> G }
edge [constraint=false]
E -> C
F -> A
F -> C
F -> E
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
-->
<!-- Title: G Pages: 1 -->
<svg width="250pt" height="332pt" viewBox="0.00 0.00 250.29 332.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 328)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-328 247.294,-328 247.294,5 -4,5"></polygon>
<!-- A -->
<g id="node2" class="node"><title>A</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-306" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-301.8" font-family="Times,serif" font-size="14.00">A</text>
</g>
<!-- B -->
<g id="node4" class="node"><title>B</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-234" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-229.8" font-family="Times,serif" font-size="14.00">B</text>
</g>
<!-- A->B -->
<g id="edge3" class="edge"><title>A->B</title>
<path fill="none" stroke="black" d="M75.2936,-287.859C75.2936,-279.268 75.2936,-270.677 75.2936,-262.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-262 75.2936,-252 71.7937,-262 78.7937,-262"></polygon>
</g>
<!-- C -->
<g id="node5" class="node"><title>C</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-157.8" font-family="Times,serif" font-size="14.00">C</text>
</g>
<!-- B->C -->
<g id="edge4" class="edge"><title>B->C</title>
<path fill="none" stroke="black" d="M75.2936,-215.859C75.2936,-207.268 75.2936,-198.677 75.2936,-190.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-190 75.2936,-180 71.7937,-190 78.7937,-190"></polygon>
</g>
<!-- D -->
<g id="node6" class="node"><title>D</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-85.8" font-family="Times,serif" font-size="14.00">D</text>
</g>
<!-- C->D -->
<g id="edge5" class="edge"><title>C->D</title>
<path fill="none" stroke="black" d="M75.2936,-143.859C75.2936,-135.268 75.2936,-126.677 75.2936,-118.085"></path>
<polygon fill="black" stroke="black" points="78.7937,-118 75.2936,-108 71.7937,-118 78.7937,-118"></polygon>
</g>
<!-- E -->
<g id="node7" class="node"><title>E</title>
<ellipse fill="none" stroke="black" cx="75.2936" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="75.2936" y="-13.8" font-family="Times,serif" font-size="14.00">E</text>
</g>
<!-- D->E -->
<g id="edge6" class="edge"><title>D->E</title>
<path fill="none" stroke="black" d="M75.2936,-71.8594C75.2936,-63.2681 75.2936,-54.6768 75.2936,-46.0854"></path>
<polygon fill="black" stroke="black" points="78.7937,-46 75.2936,-36 71.7937,-46 78.7937,-46"></polygon>
</g>
<!-- F -->
<g id="node9" class="node"><title>F</title>
<ellipse fill="none" stroke="black" cx="215.294" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="215.294" y="-85.8" font-family="Times,serif" font-size="14.00">F</text>
</g>
<!-- D->F -->
<g id="edge8" class="edge"><title>D->F</title>
<path fill="none" stroke="black" d="M102.575,-90C123.965,-90 154.385,-90 178.082,-90"></path>
<polygon fill="black" stroke="black" points="178.11,-93.5001 188.11,-90 178.11,-86.5001 178.11,-93.5001"></polygon>
</g>
<!-- E->C -->
<g id="edge13" class="edge"><title>E->C</title>
<path fill="none" stroke="black" d="M52.7625,-28.3877C36.2645,-37.3556 15.1112,-52.027 5.2936,-72 -1.76453,-86.3591 -1.76453,-93.6409 5.2936,-108 13.4238,-124.54 29.3279,-137.445 43.9243,-146.485"></path>
<polygon fill="black" stroke="black" points="42.3564,-149.621 52.7625,-151.612 45.8691,-143.567 42.3564,-149.621"></polygon>
</g>
<!-- F->A -->
<g id="edge15" class="edge"><title>F->A</title>
<path fill="none" stroke="black" d="M204.475,-106.621C185.434,-138.661 141.876,-211.016 102.294,-270 99.7106,-273.849 96.9068,-277.876 94.1283,-281.785"></path>
<polygon fill="black" stroke="black" points="91.1877,-279.879 88.1817,-290.038 96.8671,-283.971 91.1877,-279.879"></polygon>
</g>
<!-- F->C -->
<g id="edge17" class="edge"><title>F->C</title>
<path fill="none" stroke="black" d="M193.492,-100.853C170.263,-112.973 132.471,-132.69 106.103,-146.447"></path>
<polygon fill="black" stroke="black" points="104.2,-143.492 96.9536,-151.221 107.438,-149.698 104.2,-143.492"></polygon>
</g>
<!-- F->E -->
<g id="edge19" class="edge"><title>F->E</title>
<path fill="none" stroke="black" d="M193.492,-79.1472C170.263,-67.0274 132.471,-47.31 106.103,-33.5528"></path>
<polygon fill="black" stroke="black" points="107.438,-30.3018 96.9536,-28.7791 104.2,-36.5079 107.438,-30.3018"></polygon>
</g>
<!-- G -->
<g id="node12" class="node"><title>G</title>
<ellipse fill="none" stroke="black" cx="215.294" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="215.294" y="-13.8" font-family="Times,serif" font-size="14.00">G</text>
</g>
<!-- F->G -->
<g id="edge11" class="edge"><title>F->G</title>
<path fill="none" stroke="black" d="M215.294,-71.8594C215.294,-63.2681 215.294,-54.6768 215.294,-46.0854"></path>
<polygon fill="black" stroke="black" points="218.794,-46 215.294,-36 211.794,-46 218.794,-46"></polygon>
</g>
</g>
</svg>
alternatively with bottom nodes on the same height
digraph G { rankdir = LR ranksep = 1.2 nodesep = 0.5
{ rank=same A -> B -> C -> D }
D -> E
B -> F [style=invis]
{ rank=same F -> G }
edge [constraint=false]
E -> C
F -> A
F:w -> C
D -> F
F:e -> E:e
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
-->
<!-- Title: G Pages: 1 -->
<svg width="250pt" height="260pt" viewBox="0.00 0.00 250.27 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 256)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-256 247.27,-256 247.27,5 -4,5"></polygon>
<!-- A -->
<g id="node2" class="node"><title>A</title>
<ellipse fill="none" stroke="black" cx="27" cy="-234" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-229.8" font-family="Times,serif" font-size="14.00">A</text>
</g>
<!-- B -->
<g id="node4" class="node"><title>B</title>
<ellipse fill="none" stroke="black" cx="27" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-157.8" font-family="Times,serif" font-size="14.00">B</text>
</g>
<!-- A->B -->
<g id="edge3" class="edge"><title>A->B</title>
<path fill="none" stroke="black" d="M27,-215.859C27,-207.268 27,-198.677 27,-190.085"></path>
<polygon fill="black" stroke="black" points="30.5001,-190 27,-180 23.5001,-190 30.5001,-190"></polygon>
</g>
<!-- C -->
<g id="node5" class="node"><title>C</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-85.8" font-family="Times,serif" font-size="14.00">C</text>
</g>
<!-- B->C -->
<g id="edge4" class="edge"><title>B->C</title>
<path fill="none" stroke="black" d="M27,-143.859C27,-135.268 27,-126.677 27,-118.085"></path>
<polygon fill="black" stroke="black" points="30.5001,-118 27,-108 23.5001,-118 30.5001,-118"></polygon>
</g>
<!-- F -->
<g id="node10" class="node"><title>F</title>
<ellipse fill="none" stroke="black" cx="167" cy="-162" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-157.8" font-family="Times,serif" font-size="14.00">F</text>
</g>
<!-- B->F -->
<!-- D -->
<g id="node6" class="node"><title>D</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">D</text>
</g>
<!-- C->D -->
<g id="edge5" class="edge"><title>C->D</title>
<path fill="none" stroke="black" d="M27,-71.8594C27,-63.2681 27,-54.6768 27,-46.0854"></path>
<polygon fill="black" stroke="black" points="30.5001,-46 27,-36 23.5001,-46 30.5001,-46"></polygon>
</g>
<!-- E -->
<g id="node8" class="node"><title>E</title>
<ellipse fill="none" stroke="black" cx="167" cy="-18" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-13.8" font-family="Times,serif" font-size="14.00">E</text>
</g>
<!-- D->E -->
<g id="edge7" class="edge"><title>D->E</title>
<path fill="none" stroke="black" d="M54.2816,-18C75.6717,-18 106.092,-18 129.789,-18"></path>
<polygon fill="black" stroke="black" points="129.816,-21.5001 139.816,-18 129.816,-14.5001 129.816,-21.5001"></polygon>
</g>
<!-- D->F -->
<g id="edge20" class="edge"><title>D->F</title>
<path fill="none" stroke="black" d="M42.2487,-32.8682C66.5235,-58.1984 116.031,-109.859 144.521,-139.587"></path>
<polygon fill="black" stroke="black" points="142.176,-142.199 151.622,-146.997 147.23,-137.355 142.176,-142.199"></polygon>
</g>
<!-- E->C -->
<g id="edge14" class="edge"><title>E->C</title>
<path fill="none" stroke="black" d="M145.199,-28.8528C121.969,-40.9726 84.1776,-60.69 57.8095,-74.4472"></path>
<polygon fill="black" stroke="black" points="55.9069,-71.4921 48.66,-79.2209 59.1449,-77.6982 55.9069,-71.4921"></polygon>
</g>
<!-- F->A -->
<g id="edge16" class="edge"><title>F->A</title>
<path fill="none" stroke="black" d="M145.199,-172.853C121.969,-184.973 84.1776,-204.69 57.8095,-218.447"></path>
<polygon fill="black" stroke="black" points="55.9069,-215.492 48.66,-223.221 59.1449,-221.698 55.9069,-215.492"></polygon>
</g>
<!-- F->C -->
<g id="edge18" class="edge"><title>F:w->C</title>
<path fill="none" stroke="black" d="M140,-162C103.148,-162 68.7605,-134.078 48.0591,-113.01"></path>
<polygon fill="black" stroke="black" points="50.4865,-110.483 41.0722,-105.623 45.4009,-115.293 50.4865,-110.483"></polygon>
</g>
<!-- F->E -->
<g id="edge22" class="edge"><title>F:e->E:e</title>
<path fill="none" stroke="black" d="M194,-162C254.5,-162 257.809,-33.3193 203.926,-19.2449"></path>
<polygon fill="black" stroke="black" points="204.358,-15.7717 194,-18 203.487,-22.7173 204.358,-15.7717"></polygon>
</g>
<!-- G -->
<g id="node13" class="node"><title>G</title>
<ellipse fill="none" stroke="black" cx="167" cy="-90" rx="27" ry="18"></ellipse>
<text text-anchor="middle" x="167" y="-85.8" font-family="Times,serif" font-size="14.00">G</text>
</g>
<!-- F->G -->
<g id="edge12" class="edge"><title>F->G</title>
<path fill="none" stroke="black" d="M167,-143.859C167,-135.268 167,-126.677 167,-118.085"></path>
<polygon fill="black" stroke="black" points="170.5,-118 167,-108 163.5,-118 170.5,-118"></polygon>
</g>
</g>
</svg>

Only needed one cluster to keep the ABCDE group aligned. Backward directional arrows and weighting helped a lot.
digraph g
{
subgraph cluster_subCDE {
color=invis;
A; B; C; D; E;
}
A->B [weight=10];
A->F [dir=back];
B->C [weight=10];
F->C;
C->E [color=invis];
C->D;
D->E [constraint=false];
E->C;
F->G [weight=10];
F->D [dir=back];
F->E;
}

Remove rectangle from Graphviz Dot cluster subgraph

Is there a way to tell Dot to use a cluster but not show the rectangle around the subgraph nodes?

You can do this with style.
Example using style=invis:
digraph g{
subgraph cluster0 {
style=invis;
1 -> 2;
}
}
If you'd like to use this as a default for all subgraphs, use subgraph[style=invis] :
digraph g{
subgraph[style=invis];
subgraph cluster0 {
1 -> 2;
}
}
Edit: 9 years later...
The best solution is to use
peripheries=0
This will actually prevent generating the rectangle in svg output, whereas penwidth=0 still includes a polygon (with stroke-width="0", but it's still there).
I've added this since this is the most upvoted answer.

You can use style=invis:
subgraph cluster1 {
style=invis
...
}
As an alternative to the style=invis approach above, you can also set pencolor=transparent (either locally or globally).

This can be done by using the penwidth = 0 attribute. This neither affects the label text nor changes the bounding box of the cluster. Depending on the graphics driver this may output a zero width boundary. Using the suggested peripheries = 0 attribute forces the default rectangular surround to be removed as a side effect.
Although the style = invis and pencolor = transparent attributes work in most cases, there may be a need to avoid squashing the cluster label and leaving a transparent line around the cluster.
As noted by #marapet, peripheries=0 will remove the hairline from vector output formats like SVG that could be processed further.

You can also use peripheries=0

Use penwidth = 0 within subgraphs for which you don't want border.
This is how I am using it. It only removes the cluster border and does not cause any side effect as in with style = invis which also tends to removes the graph labels (undesired in my case).
digraph {
subgraph cluster2 {
label="set"
subgraph cluster0 {
penwidth = 0
label="hello"
1 -> 2;
}
subgraph cluster1 {
//penwidth = 0
label="world"
3 -> 2;
}
}
}
check out the live preview here
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: %0 Pages: 1 -->
<svg width="188pt" height="214pt" viewBox="0.00 0.00 188.00 213.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 209.6)">
<title>%0</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-209.6 184,-209.6 184,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster2</title>
<polygon fill="none" stroke="#000000" points="8,-8 8,-197.6 172,-197.6 172,-8 8,-8"/>
<text text-anchor="middle" x="90" y="-181" font-family="Times,serif" font-size="14.00" fill="#000000">set</text>
</g>
<g id="clust2" class="cluster">
<title>cluster0</title>
<polygon fill="none" stroke="#000000" stroke-width="0" points="94,-16 94,-164.8 164,-164.8 164,-16 94,-16"/>
<text text-anchor="middle" x="129" y="-148.2" font-family="Times,serif" font-size="14.00" fill="#000000">hello</text>
</g>
<g id="clust3" class="cluster">
<title>cluster1</title>
<polygon fill="none" stroke="#000000" points="16,-88 16,-164.8 86,-164.8 86,-88 16,-88"/>
<text text-anchor="middle" x="51" y="-148.2" font-family="Times,serif" font-size="14.00" fill="#000000">world</text>
</g>
<!-- 1 -->
<g id="node1" class="node">
<title>1</title>
<ellipse fill="none" stroke="#000000" cx="129" cy="-114" rx="27" ry="18"/>
<text text-anchor="middle" x="129" y="-109.8" font-family="Times,serif" font-size="14.00" fill="#000000">1</text>
</g>
<!-- 2 -->
<g id="node2" class="node">
<title>2</title>
<ellipse fill="none" stroke="#000000" cx="129" cy="-42" rx="27" ry="18"/>
<text text-anchor="middle" x="129" y="-37.8" font-family="Times,serif" font-size="14.00" fill="#000000">2</text>
</g>
<!-- 1->2 -->
<g id="edge1" class="edge">
<title>1->2</title>
<path fill="none" stroke="#000000" d="M129,-95.8314C129,-88.131 129,-78.9743 129,-70.4166"/>
<polygon fill="#000000" stroke="#000000" points="132.5001,-70.4132 129,-60.4133 125.5001,-70.4133 132.5001,-70.4132"/>
</g>
<!-- 3 -->
<g id="node3" class="node">
<title>3</title>
<ellipse fill="none" stroke="#000000" cx="51" cy="-114" rx="27" ry="18"/>
<text text-anchor="middle" x="51" y="-109.8" font-family="Times,serif" font-size="14.00" fill="#000000">3</text>
</g>
<!-- 3->2 -->
<g id="edge2" class="edge">
<title>3->2</title>
<path fill="none" stroke="#000000" d="M67.1617,-99.0816C78.3214,-88.7802 93.3334,-74.923 105.7715,-63.4417"/>
<polygon fill="#000000" stroke="#000000" points="108.1519,-66.0076 113.1259,-56.653 103.4039,-60.864 108.1519,-66.0076"/>
</g>
</g>
</svg>

Resources