javascript - JavaScript中的图形可视化库(Graph visualization library in JavaScript)

Question

I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page.(我有一个表示有向图的数据结构，我想在HTML页面上动态呈现它。)

These graphs will usually be just a few nodes, maybe ten at the very upper end, so my guess is that performance isn't going to be a big deal.(这些图通常只是几个节点，可能只有十个节点，所以我的猜测是性能不会是一个大问题。) Ideally, I'd like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around.(理想情况下，我希望能够使用jQuery将其挂钩，以便用户可以通过拖动节点来手动调整布局。)

Note: I'm not looking for a charting library.(注意：我不是在寻找图表库。)

  ask by community wiki translate from so

Answer 1

I've just put together what you may be looking for: http://www.graphdracula.net(我刚刚把你想要的东西放在一起： http ： //www.graphdracula.net)

It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around.(它是带有有向图形布局的JavaScript，SVG，你甚至可以拖动节点。)

Still needs some tweaking, but is totally usable.(仍需要一些调整，但完全可用。) You create nodes and edges easily with JavaScript code like this:(您可以使用以下JavaScript代码轻松创建节点和边：)

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license).(我使用了前面提到的Raphael JS库（graffle示例）以及我在网上找到的基于强制的图形布局算法的一些代码（所有开源，MIT许可证）。)

If you have any remarks or need a certain feature, I may implement it, just ask!(如果您有任何评论或需要某个功能，我可以实现它，只要问！)

---

You may want to have a look at other projects, too!(您可能也想看看其他项目！)

Below are two meta-comparisons:(以下是两个元比较：)

• SocialCompare has an extensive list of libraries, and the "Node / edge graph" line will filter for graph visualization ones.(SocialCompare具有广泛的库列表，“节点/边缘图”行将过滤图形可视化库。)

• DataVisualization.ch has evaluated many libraries, including node/graph ones.(DataVisualization.ch已经评估了许多库，包括节点/图形库。)

  Unfortunately there's no direct link so you'll have to filter for "graph":(很遗憾，没有直接链接，因此您必须过滤“图表”：)

Here's a list of similar projects (some have been already mentioned here):(这是一个类似项目的列表（这里已经提到了一些）：)

Pure JavaScript Libraries(纯JavaScript库)

• vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts.(vis.js支持多种类型的网络/边缘图，加上时间轴和2D / 3D图表。)

  Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks.(自动布局，自动聚类，弹性物理引擎，移动友好，键盘导航，分层布局，动画等。 麻省理工学院由一家专门研究自组织网络的荷兰公司授权和开发。)

• Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions.(Cytoscape.js - 遵循jQuery约定的移动支持的交互式图形分析和可视化。)

  Funded via NIH grants and developed by by @maxkfranz (see his answer below ) with help from several universities and other organizations.(通过NIH拨款资助，由@maxkfranz （见下面的答案 ）在几所大学和其他组织的帮助下开发。)

• The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework.(JavaScript InfoVis Toolkit - Jit，一个交互式，多用途的图形绘制和布局框架。)

  See for example the Hyperbolic Tree .(参见例如双曲树 。) Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.(由Twitter dataviz建筑师Nicolas Garcia Belmonte建造并于2010年被Sencha收购 。)

• D3.js Powerful multi-purpose JS visualization library, the successor of Protovis.(D3.js功能强大的多用途JS可视化库，是Protovis的继承者。)

  See the force-directed graph example, and other graph examples in the gallery .(请参阅强制定向图示例以及库中的其他图形示例。)

• Plotly's JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings.(Plotly的 JS可视化库使用带有JS，Python，R和MATLAB绑定的D3.js。)

  See a nexworkx example in IPython here , human interaction example here , and JS Embed API .(见IPython的一个nexworkx例子在这里 ，人际交往例如这里 ，和JS API嵌入 。)

• sigma.js Lightweight but powerful library for drawing graphs(sigma.js用于绘制图形的轻量级但功能强大的库)

• jsPlumb jQuery plug-in for creating interactive connected graphs(jsPlumb jQuery插件，用于创建交互式连接图)

• Springy - a force-directed graph layout algorithm(Springy - 力导向图布局算法)

• Processing.js Javascript port of the Processing library by John Resig(Processing.js John Resig的Processing库的Javascript端口)

• JS Graph It - drag'n'drop boxes connected by straight lines.(JS Graph It - 通过直线连接拖动框。)

  Minimal auto-layout of the lines.(最小的线条自动布局。)

• RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library.(RaphaelJS的Graffle - 通用多功能矢量绘图库的交互式图形示例。)

  RaphaelJS can't layout nodes automatically;(RaphaelJS无法自动布局节点;) you'll need another library for that.(你需要另一个图书馆。)

• <a href