使用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标签）添加元数据吗？怎么样？