Javascript库动态创建图形？

Question

这是我的要求:

我需要创建一个人的不同表示之间的链接的可视化.我认为下面的图像表明相当清楚.

此外,这些矩形还包含一些关于人的表示的数据(例如人口统计和地点).我还需要能够在单击框或它们之间的链接时处理事件,作为一种管理工具(例如,双击链接以删除它,或沿着这些行的某些东西).同样重要的是,由于人数和链接的数量会有所不同,我需要通过像图像显示的大致等距的方式将人们隔开来显示它.

什么是javascript库可以实现这一目标？我做了一些研究,但还没有发现可以干净利落的事情,但我不是这些图书馆的专家.

以下是我看过的内容:

Arbor js:可以动态创建图形的间距和链接,但我负责渲染所有的视觉效果,并且没有像单击链接那样的钩子.

jsPlumb:轻松地在元素之间创建连接并很好地绘制它们,但似乎没有解决任何布局问题.因为我不知道屏幕上会有多少人,所以我必须能够将它们等距离分开,这似乎不是jsPlumb的关注点.

D3.js:这创建了一个很好的可视化,我需要的间距,但我不知道如何在每个节点内显示数据或在链接或框上执行类似鼠标事件的操作.

我感觉有点失落,所以我希望有人可以指点一些可以帮助我的东西,或者让我看一下这些图书馆中的一个例子,告诉我我想要的东西是可能的.

Answer 1

我最终使用 Arbor 和 Raphael 作为我的渲染库，效果非常好。