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

}

导致

我希望红色节点完全不可见，不占用任何空间，但它必须保留在那里，以便它可以用于lhead / ltail其他类似的东西。< / p>

取消注释注释行时，结果为

如您所见，此节点仍然存在空间神器。

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

Answer 1

您可以使用nodesep来最小化节点间隔（min为0.02），而是将不可见peripheries添加到可见节点，以实现大致相等的分离。

以下是如何将第一张图的近似值转换为第二张图的近似值的示例：

＆＃13;

<!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>

＆＃13;

Graphviz：使不可见节点不占空间

1 个答案: