web应用程序中的交互式图形

Question

我正在尝试创建一些交互式图形可视化。我找到了Graphviz，并能够在我的应用程序中使用Pydot (Graphviz的Dot语言的Python接口)输出静态图形(作为。png图像)，但我想让我的图形更具交互性，例如，当我将鼠标放在它们上面时突出显示节点，使节点可点击，是否有一个交互式web工具我可以用来可视化图形?然而，我需要它来可视化(DAG，树，亲子)。

Answer 1

我认为您必须使用自定义HTML组件，并使用Javascript使它们具有交互性。或者使用SVG来处理这类东西，但我认为它还不能点击。https://github.com/brpapa/recursion-tree-visualizer去这个repo，在这个repo中，他用graphviz实现了一个递归可视化工具，并以某种方式使它具有交互性。

Answer 2

除了@sroush在评论中所说的，将输出生成为SVG并利用href功能和工具提示。

当生成图形时，每个节点将有一个href调用你的后端;后端将重新生成图形，并返回更新后的图形版本。

<标题>例子

digraph G {
a[href="http://localhost/backend/a/children"];
b[href="http://localhost/backend/b/children"];
c[href="http://localhost/backend/c/children"];
}

用户单击节点a并返回一个包含节点a的子节点的新图形(或渲染图像):

digraph G {
a1[href="http://localhost/backend/a/parent"];
a2[href="http://localhost/backend/a/parent"];
}