Javascript库动态创建图表？答案

【问题标题】：Javascript Library to dynamically create graphs?Javascript库动态创建图表？
【发布时间】：2012-09-05 17:10:10
【问题描述】：

这是我的要求：

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

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

什么是可以完成此任务的 javascript 库？我已经做了一些研究，但还没有找到可以完全做到这一点的东西，但我并不是这些库的专家。

以下是我看过的：

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

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

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

我感到有点失落，所以我希望有人可以为我指出一些可以帮助我的东西，或者可以为我指出其中一个库中的一个示例，它向我展示了我想要的东西是可能的。

【问题讨论】：

或许解决方案是使用多个库...我得看看其中一些库如何协同工作。
您可以使用 D3 绘制所有内容并将框的内部制作为普通的 jquery div...容纳它们需要一些时间...但理论上它可以工作
@paxRoman 容纳他们需要一些时间是什么意思？
我想最简单的解决方案是将盒子的内部（单词）作为一个 div 将它放在另一个 div 中并绘制线条并用 d3 完成剩下的 - 这就是我我说这可能是可行的...没有人尝试过强硬...:( - 所以没有暗示它是否会起作用...
你想要的听起来很像 UML 图表...也许你应该看看这是如何使用 GWT UML 图表实现的：code.google.com/p/gwtuml 并尝试使用 D3 + jQuery 进行复制

【解决方案1】：

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

【讨论】：

你介意发布一些关于你是如何做到这一点的示例代码或 github repo 吗？我想做同样的事情。
@JoshL 给我几天时间，我会找到一些我为测试而编写的示例代码。
在我看来Arbor 可以完全独立于绘图库使用。因此，您可以将 Arbor 与 Raphael 一起使用，或者与 jsPlumb、meemoo 或绝对定位 DIV 一起使用。
您说的一项要求是能够与节点及其内容进行交互。你是如何和拉斐尔一起解决这个问题的？ MouseEvents 和所有这些都是微不足道的，但是因为 Raphael 使用 SVG/Canvas 进行渲染，所以您不限于手动在节点内绘制的任何内容吗？使用plumbjs，您实际上可以继续使用HTML 作为节点内容，因为plumbjs 只替换了边框。对我来说似乎是更好的解决方案......

【解决方案2】：

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

【讨论】：