带有SVG和Javascript的交互式有向图

Interactive directed graphs with SVG and Javascript

本文关键字：交互式有向图 Javascript SVG 带有更新时间：2023-09-26

我必须为SVG有向图添加一些交互功能。

到目前为止，我要展示的图形是从点文件生成的，并呈现为SVG。我想知道是否有一些简单的方法来添加交互性(可能是Javascript)到这样的SVG文档。

我需要的是在鼠标经过节点时显示一些信息，并使比较两个节点成为可能。

由于我的模型是自动生成的，所以我更愿意保留点生成的SVG，并使用单独的Javascript在其上添加附加信息。

我有一个内联SVG的例子。这个SVG与您现有的SVG的区别在于，我演示中的SVG为节点和其他东西提供了id属性。我确实从graphviz网站上得到了这个SVG。

演示

(点击"Hello"节点)

当我有机会在服务器上上传SVG时，我将尝试从嵌入元素访问SVG。我不能在js6上这样做，在浏览器中做相同的域策略。

此页也可能有所帮助。它展示了SVG的一些脚本功能，尽管对于所有示例，脚本都在SVG本身中。