JS绘制图形库 VivaGraphJS
jopen
12年前
VivaGraphJS 是一个 JavaScript 库，用来在网页上进行图形绘制。旨在扩展和支持不同的渲染引擎和布局算法，当前支持通过 SVG 和 CSS 进行图形渲染。布局算法已经实现了：
- Force Directed - based on Barnes-Hut simulation and optimized for JavaScript language this algorithm gives
N * lg(N) + Vperformance per iteration. 
GEM - Graph Embedder algorithm created by Arne Frick, Andreas Ludwig and Heiko Mehldau. Estimated compleixity of this algorithm is O(|V|^3)- though I must have made a mistake somewhere, because force directed algorithm almost always produces better results faster. This algorithm is included to demonstrate how one can implement a new layout algorithm.
示例代码：
var graph = Viva.Graph.graph(); // Construct the graph graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b'}); graph.addNode('manunt', {url : 'https://secure.gravatar.com/avatar/c81bfc2cf23958504617dd4fada3afa8'}); graph.addNode('thlorenz', {url : 'https://secure.gravatar.com/avatar/1c9054d6242bffd5fd25ec652a2b79cc'}); graph.addNode('bling', {url : 'https://secure.gravatar.com/avatar/24a5b6e62e9a486743a71e0a0a4f71af'}); graph.addNode('diyan', {url : 'https://secure.gravatar.com/avatar/01bce7702975191fdc402565bd1045a8?'}); graph.addNode('pocheptsov', {url : 'https://secure.gravatar.com/avatar/13da974fc9716b42f5d62e3c8056c718'}); graph.addNode('dimapasko', {url : 'https://secure.gravatar.com/avatar/8e587a4232502a9f1ca14e2810e3c3dd'}); graph.addLink('anvaka', 'manunt'); graph.addLink('anvaka', 'thlorenz'); graph.addLink('anvaka', 'bling'); graph.addLink('anvaka', 'diyan'); graph.addLink('anvaka', 'pocheptsov'); graph.addLink('anvaka', 'dimapasko'); // Set custom nodes appearance var graphics = Viva.Graph.View.svgGraphics(); graphics.node(function(node) { // The function is called every time renderer needs a ui to display node return Viva.Graph.svg('image') .attr('width', 24) .attr('height', 24) .link(node.data.url); // node.data holds custom object passed to graph.addNode(); }) .placeNode(function(nodeUI, pos){ // Shift image to let links go to the center: nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12); }); var renderer = Viva.Graph.View.renderer(graph, { graphics : graphics }); renderer.run(); 