Javascript库动态创建图形？

Question

这是我的要求：

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

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

什么是可以实现此目的的JavaScript库？我做了一些研究，但还没有找到可以干净利落的事情，但我不是这些图书馆的专家。

以下是我看过的内容：

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

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

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

我感觉有点失落，所以我希望有人可以指点一些可以帮助我的东西，或者让我从一个这样的图书馆中找到一个例子，向我展示我想要的东西是可能的。

Answer 1

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

Answer 2

看看Dracula Graph Library。它是一个简单的库，似乎既可以进行布局，也可以渲染图形（使用Raphael）。然而，它有点不发达。