嵌套的graphviz树？答案

【问题标题】：Nested graphviz trees?嵌套的graphviz树？
【发布时间】：2023-03-14 21:17:01
【问题描述】：

TL;DR：graphviz 中是否有一些用于创建树的短符号，不需要重新输入节点名称？

我正在尝试使用 graphviz 的 twopi 工具创建思维导图。为了避免一遍又一遍地重写相同的标签（或使用晦涩的速记），我尝试使用嵌套大括号。

基本上我希望这里的两个子图具有相同的结构：

digraph example {            
        subgraph AA {     
                root -> {a b c}
                a -> {a1 a2 a3}
                b -> {b1 b2 b3}
                c -> {c1 c2 c3}
        }
        subgraph XX {
                _root -> {
                        _a -> { _a1 _a2 _a3 }
                        _b -> { _b1 _b2 _b3 }
                        _c -> { _c1 _c2 _c3 }
                }
        }
}

但是，第一个具有我想要的层次结构，而第二个具有来自根节点的意外连接。用twopi -Tpng example.dot -o example.png编译：

第一种形式可以使用这么短的符号名称，但是当标签包含实际文本时，文本文件很快就会变得难以阅读。

第二种形式会有所帮助，但显然我理解在 graphviz 中分组的效果。

是否有一些语法可以避免重复节点名称，就像我在 subgraph XX 中尝试的那样？

【问题讨论】：

标签： graphviz

【解决方案1】：

我很确定没有。来自https://www.graphviz.org/doc/info/lang.html：

边缘语句允许在边缘运算符的左侧和右侧都有一个子图。发生这种情况时，从左侧的每个节点到右侧的每个节点都会创建一条边。

这意味着您必须重复 something 以避免从树中的分支（包括根）到该分支上的所有内容。我通常会重复最容易编写的节点。

我认为这不会让你更快乐，但这里有一个只重复根节点的方法：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/viz.js@1.8.2/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.4.2/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var dotSrc = `
digraph example {            
    subgraph AA {     
        root -> {a b c}
        a -> {a1 a2 a3}
        b -> {b1 b2 b3}
        c -> {c1 c2 c3}
    }
    subgraph XX {
        _root -> _a -> { _a1 _a2 _a3 }
        _root -> _b -> { _b1 _b2 _b3 }
        _root -> _c -> { _c1 _c2 _c3 }
    }
}
`;

d3.select("#graph").graphviz()
  .engine("twopi")
  .renderDot(dotSrc);

</script>

【讨论】：