Graphviz：使不可见节点不带 space

Question

考虑图表

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";
    }

}

导致

我希望红色节点完全不可见，不占用 space，但它必须保留在那里，以便可以用于 lhead/ltail其他诸如此类的杂七杂八

取消注释行的结果是

如你所见，这个节点还有一个空间伪影。

问题：有没有办法在不影响图中其他节点布局的情况下完全删除它？

Answer 1

您可以对可见节点使用nodesep to minimize the node separation (min is 0.02) and instead add invisible peripheries，以实现它们大致相等的分离。

下面是一个示例，说明如何将第一个图形的近似值转换为第二个图形的近似值：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@0.1.2/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>

Graphviz：使不可见节点不带 space

Graphviz: make invisible node take no space

graphviz