Menu
Consider the graph
digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" {
graph [ margin=10 ];
node [ shape=point ];
"Invisible" [
//height=0,
//width=0,
//margin=0,
//style=invis,
color="red"
];
subgraph "cluster_1" {
"A";
"B";
"Invisible";
"C";
"D";
}
}
resulting in
I want the red node to be completely invisible, taking up no space, but it has to remain there, such that it can be used for lhead/ltail an other such miscellaneous things.
When uncommenting the commented lines, the result is
As you see, there is still a spatial artifact of this node.
Question: is there a way to remove this completely, without affecting the other nodes' layout in the graph?
650
You can use nodesep to minimize the node separation (min is 0.02) and instead add invisible peripheries to the visible nodes in order accomplish an approximately equal separation of them.
Here's an example of how to transform an approximation of your first graph into an approximation of the second:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dots = [
`
digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" {
graph [ margin=10, nodesep=0 ];
node [ shape=point, peripheries=3, penwidth=0 ];
"Invisible" [
//height=0,
//width=0,
//margin=0,
//style=invis,
color="red"
];
subgraph "cluster_1" {
"A";
"B";
"Invisible";
"C";
"D";
}
"X" [color="blue"];
"X" -> "Invisible" [headclip="false"]
}
`, `
digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" {
graph [ margin=10, nodesep=0 ];
node [ shape=point, peripheries=3, penwidth=0 ];
"Invisible" [
peripheries=0,
height=0,
width=0,
// margin=0,
// style=invis,
color="red"
];
subgraph "cluster_1" {
"A";
"B";
"Invisible";
"C";
"D";
}
"X" [color="blue"];
"X" -> "Invisible" [headclip="false"]
}
`
];
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz();
function render() {
var dot = dots[dotIndex % dots.length];
var transition1 = d3.transition()
.delay(1000)
.duration(1000 + 4000 * dotIndex);
graphviz
.tweenShapes(false)
.engine("dot")
.dot(dot)
.transition(transition1)
.render();
dotIndex += 1;
transition1
.transition()
.duration(0)
.on('end', function () {
if (dotIndex != dots.length) {
render();
}
});
}
render();
</script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
