Graphviz水平对齐顶部/底部的节点
问题描述 投票：0回答：1
我想画一个这样的图。
我想了很久，我只能生成下面的图片。
digraph G {
node [shape=plaintext]
// newrank=true;
subgraph part1 {
{rank=same state0, state9, state6}
subgraph nest1 {
state0 [label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">0</TD></TR>
<TR><TD PORT="text1" bgcolor="red">S→ ・E$</TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ ・E+T <br/> E→・T </TD></TR>
<TR><TD PORT="text3" bgcolor="green">T→ ・id <br/> T→・(E)</TD></TR>
</TABLE>>];
}
subgraph nest2 {
state6 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">6</TD></TR>
<TR><TD PORT="text1" bgcolor="red">T→(・E) </TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ ・E+T <br/> E→・T </TD></TR>
<TR><TD PORT="text3" bgcolor="green">T→ ・id <br/> T→・(E)</TD></TR>
</TABLE>>];
}
subgraph nest3 {
state9 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">9</TD></TR>
<TR><TD PORT="text" bgcolor="red">E→T・ </TD></TR>
</TABLE>>];
state5 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">5</TD></TR>
<TR><TD PORT="text" bgcolor="red">T→id・ </TD></TR>
</TABLE>>];
}
// {rank=same; nest1; nest2; nest3;}
// nest1 -> nest2 -> nest3 [style=invis]
}
subgraph part2 {
{rank=same state1, state3, state7}
state1 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">1</TD></TR>
<TR><TD PORT="text" bgcolor="red">S→E・$<br/>E→E・+T</TD></TR>
</TABLE>>];
state7 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">7</TD></TR>
<TR><TD PORT="text1" bgcolor="red">T→(E・) </TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ E・+T</TD></TR>
</TABLE>>];
state3 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">3</TD></TR>
<TR><TD PORT="text1" bgcolor="red">E→E+・T </TD></TR>
<TR><TD PORT="text2" bgcolor="green">T→・id <br/> T→・(E) </TD></TR>
</TABLE>>];
}
subgraph part3 {
{rank=same state2, state4, state8}
state2 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">2</TD></TR>
<TR><TD PORT="text" bgcolor="red">S→E$・ </TD></TR>
</TABLE>>];
state8 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">8</TD></TR>
<TR><TD PORT="text" bgcolor="red">T→(E)・ </TD></TR>
</TABLE>>];
state4 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">4</TD></TR>
<TR><TD PORT="text" bgcolor="red">E→E+T・ </TD></TR>
</TABLE>>];
}
// state0:s -> state1:n [label="E"]
// state0:title:e -> state9:title:w [label="T"]
// state0:text3:e -> state5:text:w [label="id"]
// state0:text2:e -> state6:text2:w [label="("]
state0:s -> state1:n [label="E"]
state0 -> state9 [label="T"]
state0 -> state5 [label="id"]
state0 -> state6 [label="(", weight=100]
state1:s -> state2:n [label="$"]
state1:title:e -> state3:title:w [label="+"]
state3:s -> state4:n [label="T"]
state3:n -> state5:s [label="id"]
// state3:title:e -> state6:s [label="("]
state3:title:e -> state6 [label="("]
// state6:text3:w -> state5:text:e [label="id"]
// state6:s -> state7:n [label="E"]
// state6:title:w -> state9:title:e [label="T"]
// state6:title:n -> state6:e [label="("]
state6:s -> state7:n [label="E"]
state6 -> state9 [label="T"]
state6 -> state5 [label="id"]
state6 -> state6 [label="("]
state7:text2:w -> state3:text2:e [label="+"]
state7:s -> state8:n [label=")"]
// ------------ Invisible edges to order vertically node groups
state9:s -> state5:n [style=invis]
state5:s -> state3:n [style=invis]
state3:s -> state4:n [style=invis]
state6:s -> state7:n [style=invis]
state7:s -> state8:n [style=invis]
// ---------------------------------------------------
// below two lines make sure the order 1 3 7 | 2 4 8 is right
state1 -> state3 -> state7 [style=invis]
state2 -> state4 -> state8 [style=invis]
state0:text1:e -> state9:text1:w [style=invis]
state9:text1:e -> state6:text1:w [style=invis]
}
我想调整0 9 5 6部分。这意味着我需要排名相同0 9/5 6，我尝试过使用子图，但它没有解决问题。
有没有办法水平对齐两个节点并保持顶部/底部对齐像HTML图像？
1个回答
1
投票
投票
您可以申请几个修复程序。 splines=ortho将边缘改为垂直和水平线。执行此操作时，边缘标签必须重做为xlabel=而不是label=。
但是，9和5没有正确放置。如果使用neato而不是dot，则可以将节点准确定位在所需的位置。然后你可以删除所有的子图和不可见的节点和权重，并执行以下操作：
graphviz代码将是：
digraph G {
splines=ortho;
node [shape=plaintext]
state0 [label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">0</TD></TR>
<TR><TD PORT="text1" bgcolor="red">S→ ・E$</TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ ・E+T <br/> E→・T </TD></TR>
<TR><TD PORT="text3" bgcolor="green">T→ ・id <br/> T→・(E)</TD></TR>
</TABLE>>, pos="0,4!"];
state6 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">6</TD></TR>
<TR><TD PORT="text1" bgcolor="red">T→(・E) </TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ ・E+T <br/> E→・T </TD></TR>
<TR><TD PORT="text3" bgcolor="green">T→ ・id <br/> T→・(E)</TD></TR>
</TABLE>>, pos="4,4!"];
state9 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">9</TD></TR>
<TR><TD PORT="text" bgcolor="red">E→T・ </TD></TR>
</TABLE>>, pos="2,4.7!"];
state5 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">5</TD></TR>
<TR><TD PORT="text" bgcolor="red">T→id・ </TD></TR>
</TABLE>>, pos="2,3.3!"];
state1 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">1</TD></TR>
<TR><TD PORT="text" bgcolor="red">S→E・$<br/>E→E・+T</TD></TR>
</TABLE>>, pos="0,1.5!"];
state7 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">7</TD></TR>
<TR><TD PORT="text1" bgcolor="red">T→(E・) </TD></TR>
<TR><TD PORT="text2" bgcolor="green">E→ E・+T</TD></TR>
</TABLE>>, pos="4,1.5!"];
state3 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">3</TD></TR>
<TR><TD PORT="text1" bgcolor="red">E→E+・T </TD></TR>
<TR><TD PORT="text2" bgcolor="green">T→・id <br/> T→・(E) </TD></TR>
</TABLE>>, pos="2,1.5!"];
state2 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">2</TD></TR>
<TR><TD PORT="text" bgcolor="red">S→E$・ </TD></TR>
</TABLE>>, pos="0,0!"];
state8 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">8</TD></TR>
<TR><TD PORT="text" bgcolor="red">T→(E)・ </TD></TR>
</TABLE>>, pos="4,0!"];
state4 [label=<
<TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="title" bgcolor="yellow">4</TD></TR>
<TR><TD PORT="text" bgcolor="red">E→E+T・ </TD></TR>
</TABLE>>, pos="2,0!"];
state0:s -> state1:n [xlabel="E"]
state0 -> state9 [xlabel="T"]
state0:e -> state5:w [xlabel="id"]
state0 -> state6 [xlabel="("]
state1:s -> state2:n [xlabel="$"]
state1:title:e -> state3:title:w [xlabel="+"]
state3:s -> state4:n [xlabel="T"]
state3:n -> state5:s [xlabel="id"]
state3:title:e -> state6 [xlabel="("]
state6:s -> state7:n [xlabel="E"]
state6 -> state9 [xlabel="T"]
state6 -> state5 [xlabel="id"]
state6 -> state6 [xlabel="("]
state7:text2:w -> state3:text2:e [xlabel="+"]
state7:s -> state8:n [xlabel=")"]
}
References
最新问题
- 使用具有多种样式的Scss变量？
- 运行基线分析器时出现错误“无法找到与‘:app:generateBenchmarkReleaseBaselineProfile’匹配的任务”错误
- 我在 python 3 中通过 pip install 下载的库中存在问题
- Batcher 的奇偶合并排序
- 将 bootstrap 添加到 symfony 应用程序的正确方法是什么？
- bcp 错误：文本列数据不完整且强制转换规范的字符值无效
- 除了函数之外还有其他理由使用引用变量吗？
- 对数组的每 N 个元素进行排序的排序算法
- Flexbox 布局，无需将项目重新渲染到新父级
- 使用PowerShell方式安装Visual Studio 2022
- 如何让编译器发出有关 switch 和 case 中枚举类型不匹配的警告？
- `AcceleratorState`对象没有属性`distributed_type`
- 仅显示修改日期、修改时间和名称
- Python 可能并行运行 io 任务，这不可避免地需要 for 循环？
- 如何在Python中获取网络接口卡名称？
- 对于刚刚将应用程序移植到较新的 Java 的应用程序，是否有 --add-opens 命令行参数的替代方案？
- webApi 2 中的子域 CORS
- Task.WhenAll 与 Parallel.ForEachAsync - 哪种方法最好，为什么？
- 通过cdn在vue应用程序中进行条带支付
- Docusaurus 从内联 SVG 中剥离了一些属性；需要 ID 才能访问 我正在使用这样的内联 SVG： icon-checkmark.svg的内容： <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 46 46"><title id="myTitleID">An accessible title</title><path {…} /></svg> 导入和内联： import CheckmarkSvg from '/img/site-components/icon-checkmark.svg'; <CheckmarkSvg role="image" aria-labelledby="myTitleID" className="myClass" /> 但是 Docusaurus 从渲染的 SVG 中删除了标题的 ID 属性。 有解决方法吗？如果没有它，标题在某些浏览器中将无法访问。 正如 @ccprog 在他们的评论中所述，Docusaurus 依赖于 SVGR，而 SVGR 又依赖于 SVGO。 SVGO 是最终做这件事的图书馆。但是，最新版本的 Docusaurus 不再删除 <title>，因为 Docusaurus 预先配置了 SVGR/SVGO 以忽略该行为。 参考：fix(utils)：使SVGO不删除标题 关于一般删除<title>，这确实是 SVGO 的一个缺陷，这种行为将在下一个主要版本中被禁用。 虽然这不再是一个持续存在的问题，但我将给出如何解决此类问题的答案，以防有人想通过 Docusaurus 重新配置其他 SVGO 插件。 我建议通过 Docusaurus 的 Lifecycle API 解决此问题。可以使用 configureWebpack 功能来更改 SVGO 选项。 为此，请在您的存储库中为 Docusaurus 创建一个自定义插件。 src/plugins/configure-svgo.js /** * Docusaurus uses SVGR internally, which in turn uses SVGO. This alters the * SVGO config and merges the changes back into Docusaurus' webpack config. * * @returns {Object} */ function configureSvgo() { return { name: 'configure-svgo', configureWebpack(config) { /** @type {object[]} */ const rules = config.module.rules; const rule = rules.find((rule) => { /** @type {string|undefined} */ const loader = rule.oneOf?.[0]?.use?.[0]?.loader; return loader && loader.includes("/@svgr/"); }); const svgoConfig = rule.oneOf[0].use[0].options.svgoConfig; // alter svgoConfig with whatever changes you need return { mergeStrategy: { "module.rules": "replace" }, module: { rules } }; } }; } module.exports = configureSvgo; 您可以通过将插件附加到插件数组或禁用默认预设中的插件等来更改svgoConfig。在这种情况下，您需要禁用插件。 创建插件后，您需要在 Docusaurus 配置中启用它： docusaurus.config.js // … plugins: [ // … "./src/plugins/configure-svgo.js" ], // … Docusaurus 现在会将您的 SVGO 配置传递到 SVGR/SVGO，因此 SVG 仍将得到优化，但也可以满足您的要求。
© www.soinside.com 2019 - 2024. All rights reserved.