Like, let's say I had a tree structure, then I would use, naturally a tree control, since that GUI element maps perfectly to the structure.
就像,假设我有一个树结构,然后我会使用,自然是一个树控件,因为该GUI元素完美地映射到结构。
But what I have is a graph, potentially too wide to fit in one web page. I can't think of examples of GUIs that really match the structure. Some ideas I have that don't quite fit are, the web itself, with hyperlinks, the browser back button, and the forward button. But that just shows you one node at a time. I would like to display as many nodes as I can, and allow navigation to a new area of the graph. Something like Google maps might be a good model, in that you have full freedom to scroll in any direction.
但我所拥有的是一个图表,可能太宽,无法放入一个网页。我想不出真正与结构相匹配的GUI的例子。我有一些不太合适的想法是,网络本身,有超链接,浏览器后退按钮和前进按钮。但这只是一次显示一个节点。我想尽可能多地显示节点,并允许导航到图形的新区域。谷歌地图之类的东西可能是一个很好的模型,因为你可以完全*地向任何方向滚动。
6 个解决方案
#1
2
Facebook used to do this, way back in the day, to visualize your friends. They drew nodes as little boxes, with lines connecting them, as expected. They drew the graphs into an SVG image, so you could easily zoom in and out.
Facebook过去常常这样做,以形象化您的朋友。正如预期的那样,他们将节点绘制为小盒子,并用连接它们的线条。他们将图形绘制成SVG图像,因此您可以轻松放大和缩小。
Another option might be to draw into a <canvas> tag and scale that somehow. I imagine that's possible, but I don't know much about <canvas>
另一种选择可能是绘制到
Another option would be to draw it into an inline frame or other box that allows the user to scroll horizontally and vertically.
另一种选择是将其绘制到内嵌框架或其他允许用户水平和垂直滚动的框中。
#2
1
Basically the best thing I've seen for this sort of thing would be either Flash or Java that let you drag the nodes around, and it would auto stretch, move, expand based on tension values on the edges.
基本上我见过的最好的事情就是使用Flash或Java来拖动节点,它会根据边缘的张力值自动拉伸,移动,扩展。
Brief googlage exposes this. I tried the Java application version, seems to work on a basic level, but perhaps overkill for your needs. :) Check out the AJAX version, maybe?
简单的googlage暴露了这一点。我尝试过Java应用程序版本,似乎在基础层面上工作,但可能会满足您的需求。 :)查看AJAX版本,也许吧?
Perhaps check out ways to drag with jQuery.
或许查看使用jQuery拖动的方法。
#3
1
For a nice dynamic example of a huge graph displayed by small regions, you can take a look at: Visuwords. They present themselves as a graphical dictionary which shows multiple links between words.
有关小区域显示的巨大图形的动态示例,您可以查看:Visuwords。它们呈现为一个图形字典,显示单词之间的多个链接。
#4
1
I don't think there is an existing widget which will fit your need like a tree control would for a tree strcuture.
我不认为有一个现有的小部件可以满足你的需要,就像一个树控制树的结构。
that said I definitely recommand one of the yWorks products.
那说我肯定推荐其中一个yWorks产品。
Get a feel for what it can do, by trying out yEd, then check the documentation which seems very good. they also propose an ajax and flex fronted for their library, which will give you a web compatible representation, including google maps like drag and dropping see graph viewer demo: http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer.html ) I don't work for them, I am not even a paying customer, but I was very impressed by yEd.
通过尝试yEd来了解它可以做什么,然后查看看起来非常好的文档。他们还为他们的库提出了一个ajax和flex,它将为你提供一个web兼容的表示,包括谷歌地图,如拖放看图形查看器演示:http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer .html)我不为他们工作,我甚至不是付费客户,但我对yEd印象非常深刻。
#5
0
You could try prefuse. It is an open source interactive data visualization toolkit. It has a very nice collection of layouts that can be used for displaying node graphs along with other visualization effects. The toolkit comes in two different flavours, one in Java and another in Actionscript, which can be used in Flash/Flex.
你可以试试prefuse。它是一个开源的交互式数据可视化工具包。它有一个非常好的布局集合,可用于显示节点图形以及其他可视化效果。该工具包有两种不同的风格,一种是Java,另一种是ActionScript,可以在Flash / Flex中使用。
#6
#1
2
Facebook used to do this, way back in the day, to visualize your friends. They drew nodes as little boxes, with lines connecting them, as expected. They drew the graphs into an SVG image, so you could easily zoom in and out.
Facebook过去常常这样做,以形象化您的朋友。正如预期的那样,他们将节点绘制为小盒子,并用连接它们的线条。他们将图形绘制成SVG图像,因此您可以轻松放大和缩小。
Another option might be to draw into a <canvas> tag and scale that somehow. I imagine that's possible, but I don't know much about <canvas>
另一种选择可能是绘制到
Another option would be to draw it into an inline frame or other box that allows the user to scroll horizontally and vertically.
另一种选择是将其绘制到内嵌框架或其他允许用户水平和垂直滚动的框中。
#2
1
Basically the best thing I've seen for this sort of thing would be either Flash or Java that let you drag the nodes around, and it would auto stretch, move, expand based on tension values on the edges.
基本上我见过的最好的事情就是使用Flash或Java来拖动节点,它会根据边缘的张力值自动拉伸,移动,扩展。
Brief googlage exposes this. I tried the Java application version, seems to work on a basic level, but perhaps overkill for your needs. :) Check out the AJAX version, maybe?
简单的googlage暴露了这一点。我尝试过Java应用程序版本,似乎在基础层面上工作,但可能会满足您的需求。 :)查看AJAX版本,也许吧?
Perhaps check out ways to drag with jQuery.
或许查看使用jQuery拖动的方法。
#3
1
For a nice dynamic example of a huge graph displayed by small regions, you can take a look at: Visuwords. They present themselves as a graphical dictionary which shows multiple links between words.
有关小区域显示的巨大图形的动态示例,您可以查看:Visuwords。它们呈现为一个图形字典,显示单词之间的多个链接。
#4
1
I don't think there is an existing widget which will fit your need like a tree control would for a tree strcuture.
我不认为有一个现有的小部件可以满足你的需要,就像一个树控制树的结构。
that said I definitely recommand one of the yWorks products.
那说我肯定推荐其中一个yWorks产品。
Get a feel for what it can do, by trying out yEd, then check the documentation which seems very good. they also propose an ajax and flex fronted for their library, which will give you a web compatible representation, including google maps like drag and dropping see graph viewer demo: http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer.html ) I don't work for them, I am not even a paying customer, but I was very impressed by yEd.
通过尝试yEd来了解它可以做什么,然后查看看起来非常好的文档。他们还为他们的库提出了一个ajax和flex,它将为你提供一个web兼容的表示,包括谷歌地图,如拖放看图形查看器演示:http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer .html)我不为他们工作,我甚至不是付费客户,但我对yEd印象非常深刻。
#5
0
You could try prefuse. It is an open source interactive data visualization toolkit. It has a very nice collection of layouts that can be used for displaying node graphs along with other visualization effects. The toolkit comes in two different flavours, one in Java and another in Actionscript, which can be used in Flash/Flex.
你可以试试prefuse。它是一个开源的交互式数据可视化工具包。它有一个非常好的布局集合,可用于显示节点图形以及其他可视化效果。该工具包有两种不同的风格,一种是Java,另一种是ActionScript,可以在Flash / Flex中使用。