动态创建图表的JavaScript库?

5
这里是我的需求:
我需要创建一个可视化的链接,连接不同的人物表示。下面的图片就很清晰地说明了这一点。
此外,那些矩形还应该包含有关该人物表示的一些数据(例如人口统计和地点)。我还需要能够处理单击框或它们之间链接的事件,作为一种管理工具(因此,例如,双击链接以删除它,或类似的东西)。同样重要的是,由于人数和链接数量会变化,我需要像图像显示的那样通过将人物大致等距地分布来显示它。
有哪个JavaScript库可以做到这一点?我已经进行了一些调查,但尚未找到可以干净地完成此操作的库,但我对这些库并不是很熟悉。
以下是我看过的库:
Arbor js:可以动态创建图形的间距和链接,但我负责渲染所有的视觉效果,并且没有任何钩子用于点击链接的事情。
jsPlumb:轻松创建元素之间的连接并将它们绘制得相当好,但似乎没有解决任何布局问题。由于我不知道屏幕上会有多少人,因此我必须能够将它们均匀地间隔开来,而这似乎不是jsPlumb的问题。
D3.js:这可以创建一个具有所需间距的好可视化,但我不知道如何在每个节点内显示数据或像鼠标事件一样操作链接或框等。
我感到有点迷失,所以我希望有人能指导我使用哪些工具来帮助我,或者向我展示这些库中的示例,以显示我想要的东西是可能的。

也许解决方案是使用多个库...我得看看这些库能否很好地协同工作。 - AHungerArtist
你可以使用D3绘制所有内容,并将盒子内部作为普通的jQuery divs...为了容纳它们,需要一些时间...但理论上它可以工作。 - paxRoman
@paxRoman 你说要容纳他们需要一些时间是什么意思? - AHungerArtist
我猜最简单的解决方案就是将盒子内部(文字)绘制为一个 div,将其放入另一个 div 中,并使用 d3 绘制线条和其他内容 - 这就是我所说的可能可行的方法...但是没有人尝试过...:( - 所以没有任何提示它是否会起作用... - paxRoman
你想要的听起来很像UML图表...也许你应该看看GWT UML图表是如何实现的:http://code.google.com/p/gwtuml/,然后尝试使用D3 + jQuery复制它。 - paxRoman
你可以尝试使用d3.js力导向图(https://github.com/mbostock/d3/wiki/Force-Layout)。该布局不要求每个节点都是SVG对象,它可以只是一个普通的<div>,其位置会更新。 - Alex
2个回答

1

最终我选择了Arbor和Raphael作为我的渲染库,效果非常好。


您能否提供一些您是如何实现这一点的样例代码或 Github 仓库?我也想尝试同样的事情。 - JoshL
@JoshL 给我几天时间,我会找到一些我用来测试的示例代码。 - AHungerArtist
在我看来,Arbor 可以完全独立于绘图库使用。因此,您可以像您所做的那样将 Arbor 与 Raphael 一起使用,或者与 jsPlumbmeemoo 或绝对定位的 DIV 元素一起使用。 - Benny Bottema
你说过一个要求是能够与节点及其内容进行交互。你是如何通过Raphael解决这个问题的呢?鼠标事件等都很简单,但由于Raphael使用SVG/Canvas进行渲染,你是否只能手动绘制节点内部的内容,从而受到限制?使用plumbjs,你实际上可以继续使用HTML作为节点的内容,因为plumbjs只替换边框。在我看来,这是一种更优越的解决方案... - Benny Bottema

1

看一下Dracula图形库。它是一个简单的库,似乎可以同时进行图形布局和渲染(在Raphael的帮助下)。然而它还有些不成熟。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接