比如说,假设我有一个树形结构,那么我自然会使用一个树形控件,因为该 GUI 元素完美地映射到该结构。
但我所拥有的是一个图表,可能太宽而无法放入一个网页。我想不出真正匹配结构的 GUI 示例。我有一些不太合适的想法是,网络本身,带有超链接、浏览器后退按钮和前进按钮。但这一次只显示一个节点。我想尽可能多地显示节点,并允许导航到图表的新区域。像谷歌地图这样的东西可能是一个很好的模型,因为你可以完全自由地向任何方向滚动。
比如说,假设我有一个树形结构,那么我自然会使用一个树形控件,因为该 GUI 元素完美地映射到该结构。
但我所拥有的是一个图表,可能太宽而无法放入一个网页。我想不出真正匹配结构的 GUI 示例。我有一些不太合适的想法是,网络本身,带有超链接、浏览器后退按钮和前进按钮。但这一次只显示一个节点。我想尽可能多地显示节点,并允许导航到图表的新区域。像谷歌地图这样的东西可能是一个很好的模型,因为你可以完全自由地向任何方向滚动。
Facebook 过去常常这样做,以可视化您的朋友。正如预期的那样,他们将节点绘制成小盒子,用线连接它们。他们将图形绘制成 SVG 图像,因此您可以轻松放大和缩小。
另一种选择可能是绘制<canvas>
标签并以某种方式对其进行缩放。我想这是可能的,但我不太了解<canvas>
另一种选择是将其绘制到内联框架或其他允许用户水平和垂直滚动的框中。
对于由小区域显示的巨大图形的一个很好的动态示例,您可以查看:Visuwords。它们将自己呈现为一个图形字典,显示单词之间的多个链接。
我认为没有一个现有的小部件可以满足您的需求,就像树控件适合树结构一样。
也就是说,我绝对推荐其中一款 yWorks产品。
通过尝试 yEd 来了解它的功能,然后查看看起来非常好的文档。他们还为他们的库提出了一个 ajax 和 flex 前端,这将为您提供与 Web 兼容的表示,包括像拖放一样的谷歌地图,请参阅图形查看器演示: http: //live.yworks.com/yfiles-ajax/Examples/Graph_Viewer .html ) 我不为他们工作,我什至不是付费客户,但 yEd 给我留下了深刻的印象。
基本上我见过的最好的东西是Flash或Java,它可以让你拖动节点,它会根据边缘的张力值自动拉伸、移动、扩展。
简要谷歌揭示了这一点。我尝试了 Java 应用程序版本,似乎可以在基本级别上工作,但对于您的需求来说可能有点过分了。:) 检查 AJAX 版本,也许?
也许查看使用 jQuery 拖动的方法。
GraphViz是我见过的最好的。在桌面和网络上工作,这里有很多例子。
你可以试试prefuse。它是一个开源的交互式数据可视化工具包。它有一个非常好的布局集合,可用于显示节点图以及其他可视化效果。该工具包有两种不同的风格,一种是 Java,另一种是 Actionscript,可用于 Flash/Flex。