svg - 使用 DOT 的层次结构，使用 Graphviz 生成 SVG 图像

Question

我正在尝试使用 DOT 语言使用 Graphviz 生成图形并将 Javascript 应用于图形。

问题是在特定级别（即父母/孩子）构建节点和边。生成的 svg 看起来（伪）如下：

<svg>
   <g>Node 1</g>
   <g>Node 2</g>
   <g>Node 3</g>
   <g>Edge 4</g>
   <g>Edge 5</g>
</svg>

我想使用 javascript 和 JQuery 来切换节点。当我单击节点 1 时，应显示边缘和子级（第一级），而不是子级子级等。

$("#SVGContainer").on("click", "g.node", function(){
   $(this).siblings().toggle();
});

所以，我的问题是如何编写 DOT。所以 graphviz 会生成 SVG 以便我可以使用 sibblings 函数？

输出应该是这样的：

<svg>
   <level1>
      <g>Node 1</g>
      <g>Edge 4</g>
      <g>Edge 5</g>
   </level1>
   <level2>
      <g>Node 2</g>
      <g>Node 3</g>
   </level2> 
</svg>

提前致谢！

编辑：简化问题。我可以使用 DOT 语言将元数据添加到 SVG 图像（g 标签）吗？如何？