【问题标题】：Interactive graphs in a web applicationWeb 应用程序中的交互式图表
【发布时间】：2022-06-21 11:21:01
【问题描述】：

我正在尝试创建一些交互式图形可视化。我找到了 Graphviz，并能够使用 Pydot（Graphviz 的 Dot 语言的 Python 接口）在我的应用程序中输出静态图（作为 .png 图像），但我想让我的图更具交互性，例如当我将鼠标悬停在节点上时突出显示节点，使节点可点击，是否有可用于可视化图形的交互式网络工具？但是，我需要它来可视化（DAG、树、父子）。

【问题讨论】：

使用 Graphviz 或其他应用程序生成 SVG 输出，然后根据需要对 SVG 文件进行后处理。在鼠标悬停和/添加“onclick”操作时更改节点/边缘颜色应该不会太难。

标签： graph graphviz interactive directed-acyclic-graphs

【解决方案1】：

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

【讨论】：

【解决方案2】：

除了@sroush 在 cmets 中所说的之外，将输出生成为 SVG 并利用 href 功能和 tooltip。

生成图表时，每个节点都会有一个 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"];
}

【讨论】：