我刚刚把你可能要找的东西放在一起:http://www.graphdracula.net

它是带有有向图形布局的JavaScript, SVG，你甚至可以拖动节点。仍然需要一些调整，但完全可用。你可以像这样用JavaScript代码轻松创建节点和边:

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

我使用了之前提到的Raphael JS库(涂鸦示例)加上一些我在网上找到的基于力的图形布局算法的代码(一切都是开源的，MIT许可)。如果你有任何评论或需要某个功能，我可能会实现它，只是问!

你可能也想看看其他项目!下面是两个元比较:

SocialCompare有一个广泛的库列表，“节点/边图”行将过滤图形可视化。 DataVisualization。Ch评估了许多库，包括节点/图库。不幸的是，没有直接的链接，所以你必须过滤“graph”:

下面是一些类似的项目(有些已经在这里提到过了):

纯JavaScript库

vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. 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. Funded via NIH grants and developed by by @maxkfranz (see his answer below) with help from several universities and other organizations. The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010. D3.js Powerful multi-purpose JS visualization library, the successor of 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. See a nexworkx example in IPython here, human interaction example here, and JS Embed API. sigma.js Lightweight but powerful library for drawing graphs jsPlumb jQuery plug-in for creating interactive connected graphs Springy - a force-directed graph layout algorithm JS Graph It - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines. RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can't layout nodes automatically; you'll need another library for that. JointJS Core - David Durman's MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io.

商业库

交互式图形绘制和布局库 yFiles的HTML商业图形绘制和布局库 KeyLines商用JS网络可视化工具包 ZoomCharts商业多用途可视化库 Syncfusion JavaScript Diagram用于绘制和可视化的商业图表库。

废弃的库

Cytoscape Web Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js) Canviz JS renderer for Graphviz graphs. Abandoned in Sep 2013. arbor.js Sophisticated graphing with nice physics and eye-candy. Abandoned in May 2012. Several semi-maintained forks exist. jssvggraph "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". Abandoned in 2012. jsdot Client side graph drawing application. Abandoned in 2011. Protovis Graphical Toolkit for Visualization (JavaScript). Replaced by d3. Moo Wheel Interactive JS representation for connections and relations (2008) JSViz 2007-era graph visualization script dagre Graph layout for JavaScript

javascript库的

复杂的图形可视化语言 Graphviz已经使用Emscripten编译成Javascript，这里有一个在线互动演示 漂亮和强大的基于Flash的图形绘制 NodeBox Python图形可视化 John Resig编写的Processing库的Javascript端口

正如guruz提到的，JIT有几个可爱的图/树布局，包括非常吸引人的RGraph和HyperTree可视化。

此外，我刚刚在github上发布了一个超级简单的基于svg的实现(没有依赖关系，~125 LOC)，应该足以在现代浏览器中显示小图形。

免责声明:我是Cytoscape.js的开发人员

js是一个HTML5图形可视化库。该API非常复杂，并且遵循jQuery惯例，包括

用于查询和过滤的选择器(cy.elements("node[weight >= 50].someClass")的功能与您所期望的差不多)， 链接(例如cy.nodes().unselect().trigger("mycustomevent"))， 类似于jquery的事件绑定函数， 元素作为集合(像jQuery有HTMLDomElements的集合)， 可扩展性(可以添加自定义布局，UI，核心和收集功能等)， 和更多。

如果您正在考虑用图形构建一个严肃的web应用程序，那么您至少应该考虑一下Cytoscape.js。它是免费的，开源的:

http://js.cytoscape.org

在商业场景中，一个有力的竞争者肯定是HTML的yFiles:

它提供了:

Easy import of custom data (this interactive online demo seems to pretty much do exactly what the OP was looking for) Interactive editing for creating and manipulating the diagrams through user gestures (see the complete editor) A huge programming API for customizing each and every aspect of the library Support for grouping and nesting (both interactive, as well as through the layout algorithms) Does not depend on a specfic UI toolkit but supports integration into almost any existing Javascript toolkit (see the "integration" demos) Automatic layout (various styles, like "hierarchic", "organic", "orthogonal", "tree", "circular", "radial", and more) Automatic sophisticated edge routing (orthogonal and organic edge routing with obstacle avoidance) Incremental and partial layout (adding and removing elements and only slightly or not at all changing the rest of the diagram) Support for grouping and nesting (both interactive, as well as through the layout algorithms) Implementations of graph analysis algorithms (paths, centralities, network flows, etc.) Uses HTML 5 technologies like SVG+CSS and Canvas and modern Javascript leveraging properties and other more ES5 and ES6 features (but for the same reason will not run in IE versions 8 and lower). Uses a modular API that can be loaded on-demand using UMD loaders

下面是一个示例渲染，显示了大部分请求的功能:

充分披露:我为yWorks工作，但在Stackoverflow上我不代表我的雇主。