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

【问题标题】：Interactive directed graphs with SVG and Javascript带有 SVG 和 Javascript 的交互式有向图
【发布时间】：2011-11-19 00:19:23
【问题描述】：

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

到目前为止，我要展示的图表是从点文件生成的，并呈现为 SVG。我想知道是否有一些简单的方法可以向此类 SVG 文档添加交互性（可能使用 Javascript）。

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

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

【问题讨论】：

你能提供一个你的 DOT 生成的 SVG 样本吗？
@kzh 当然。我必须处理具有节点和边缘的东西，例如这个要点gist.github.com/1223221 中的那个我刚刚发现canviz 能够直接处理点文件，您认为将交互性添加到SVG 元素o画布图？
这是个好问题...您找到最佳答案了吗？实际上，我想做的是通过从 Web 浏览器单击它们来减少/扩展 graphviz 集群。有什么想法吗？
@Stéphane 我开始在我的博客上发布一系列关于该主题的帖子，但不幸的是我没有太多时间来写它们wishlabs.blogspot.com/2011/09/… 我认为我的方法很好，可以添加其他信息, 来操纵颜色和显示/隐藏节点和弧线，但我认为如果您必须更改图形的布局，它不会太有效。为此尝试一个 javascript 图形可视化库，我想它会更好地满足您的目的。

【解决方案1】：

我有一个内联 SVG 的例子。这个 SVG 和你所拥有的不同之处在于我的演示中的那个具有节点和事物的 id 属性。我确实从 graphviz 网站获得了这个 SVG。

Demo

（点击“Hello”节点）

当我有机会在我的服务器上上传 SVG 时，我会尝试从嵌入元素访问 SVG。我不能在 JSFiddle 上对浏览器中的相同域策略执行此操作。

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

【讨论】：

谢谢，实际上我可以在网页上内嵌 SVG，这样就足够了。主要问题与我没有有意义的 id 属性有关。对我来说有意义的是 svg:title，是否可以获得具有特定标题的元素（也许使用 jQuery）？
看来我可以得到带有有意义标识符的 SVG：graphviz.org/content/preservation-dot-id-svg
太棒了。您应该在问题中重新发布您的想法和过程。我很想看看。
当然，只要我想出一些有用的东西，我会及时通知您。我本来打算在周末做的，但我没能做到:)