是否有事件侦听器来检测点/SVG 图上的鼠标点击？答案

【问题标题】：Are there event listeners to detect mouse clicks on dot/SVG graph?是否有事件侦听器来检测点/SVG 图上的鼠标点击？
【发布时间】：2012-09-04 05:26:25
【问题描述】：

我正在玩生成点文件，然后将它们转换为具有很多节点的 SVG 图。

我的问题是，是否有事件侦听器来检测鼠标点击点/SVG 图节点？

例如，在SVG图中的一个节点上右击，我做一些事情（可能从节点获取相关信息然后做一些事情），

那么如何生成dot文件或者SVG文件来实现呢？

【问题讨论】：

标签： svg graphviz dot

【解决方案1】：

有几种方法可以创建交互式 SVG 图形：

使用 SMIL，对 svg 的扩展（示例教程http://apike.ca/prog_svg_smil.html）
Javascript（Raphael 库非常好）
CSS 动画

在任何情况下，您都必须在支持任何这些技术（浏览器）的客户端中显示 svg 图，并且除了 graphviz 创建的 svg 输出之外，您还必须对其进行编码。

【讨论】：

【解决方案2】：

关于这个的另一个想法（意识到这个问题很老，但也许它可以帮助遇到的人）。

根据您想要做什么，将事件处理与绘图分离可能是最简单的。我的意思是，您可以找出 graphviz 将节点（以及边、标签等）放置在哪里，例如，参见this post on how to do it in python。然后，您可以在所使用的任何 GUI 的背景中绘制图形，并使用其原生事件处理通过在节点上放置不可见的可点击对象来对 on_click 做出反应。

【讨论】：

我意识到这不是对确切原始问题的准确答案，但我认为 7 年后它不再是 OP 的问题，无论如何......

【解决方案3】：

如果您想要交互式图表，那么 graphviz 可能不是最佳选择。

我建议您查看D3.js。也许你可以用 json 构建图形数据并用 D3 加载它们？

【讨论】：

D3 通常与 svg 一起使用（生成某些数据集的 svg 表示）。与使用 graphviz 相比的主要好处之一是所有图形布局都是在浏览器中动态完成的。