5

这是我的要求:

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

在此处输入图像描述

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

什么是可以实现此目的的 javascript 库?我已经做了一些研究,但还没有找到可以干净地做到这一点的东西,但我几乎不是这些图书馆的专家。

以下是我看过的:

Arbor js:可以动态创建图形的间距和链接,但我负责渲染所有视觉效果,并且对于单击链接之类的事情真的没有钩子。

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

D3.js:这可以创建具有我需要的间距的良好可视化,但我看不到如何在每个节点内显示数据或执行诸如链接或框上的鼠标事件之类的操作。

我感到有点失落,所以我希望有人能指出一些可以帮助我的东西,或者可能指出我从这些库中的一个例子中可以看到我想要的东西是可能的。

4

2 回答 2

1

我最终使用带有 Raphael 的 Arbor 作为我的渲染库,效果非常好。

于 2012-09-13T20:48:39.800 回答
1

看看Dracula Graph Library。这是一个简单的库,似乎既可以进行布局又可以渲染图形(在引擎盖下使用 Raphael)。然而,它有点不发达。

于 2013-06-18T14:39:02.657 回答