使用SVG和Javascript实现交互式有向图

Question

使用SVG和Javascript实现交互式有向图

javascriptsvgvisualizationdotdirected-graph

7

我需要为SVG有向图添加一些交互功能。

到目前为止，我想要显示的图形是从dot文件生成并呈现为SVG。我想知道是否有一种简单的方法可以将交互性(可能使用Javascript)添加到这些SVG文档中。

我需要的是当鼠标移动到节点上时显示一些信息，并能够比较两个节点。

由于我的模型是自动生成的，因此我更喜欢保留点生成的SVG，并使用单独的Javascript添加额外的信息。

- mariosangiorgio

你能提供一份由DOT生成的SVG样本吗？ - kzh

@kzh 当然。我需要处理一些具有节点和边缘的东西，例如此处的要点 https://gist.github.com/1223221 我刚刚发现canviz能够直接处理dot文件，您认为将交互性添加到SVG元素或canviz图形中会更容易？ - mariosangiorgio

这是一个好问题... 你找到最佳答案了吗？实际上，我想做的是通过在Web浏览器中单击它们来缩小/扩大Graphviz集群。有什么想法吗？ - Stéphane

@Stéphane 我正在我的博客上开始一系列关于这个主题的文章，但不幸的是我没有太多时间来写它们。http://wishlabs.blogspot.com/2011/09/interactive-dot-generated-svg-graph.html 我认为我的方法很好，可以添加额外的信息，操作颜色并显示/隐藏节点和弧线，但如果您必须更改图形的布局，我认为它不会太有效。为此，请尝试使用JavaScript图形可视化库，我想它会更好地满足您的需求。 - mariosangiorgio

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kzh · Accepted Answer

我有一个内联SVG的示例。与您拥有的不同之处在于，在我的演示中，节点和其他事物都具有id属性。我是从graphviz网站获取此SVG的。

演示

(点击“Hello”节点)

当我有机会在我的服务器上上传SVG时，我将尝试从嵌入元素中访问SVG。在浏览器中由于同源策略，无法在JSFiddle上执行。

这个页面也可能会有所帮助。它展示了SVG的一些脚本功能，虽然所有示例的脚本都在SVG本身中。