VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

Question

VivaGraphJS 是一个基于JavaScript的图形绘制插件，可能是已知的速度最快的插件，他支持很多自定义扩展，并且支持不同的渲染引擎和布局框架，底部模块可以通过 ngraph 查询获取。

VivaGraphJS 是一个 JavaScript 库，用来在网页上进行图形绘制。旨在扩展和支持不同的渲染引擎和布局算法，当前支持通过 SVG 和 CSS 进行图形渲染。

开始使用 VivaGraphJS 是非常简单的，只需要引入 vivagraph.js 文件在 dist 目录下面，下面的代码是用2个节点和一个边渲染图所需的最小代码：

var graph = Viva.Graph.graph();
graph.addLink(1, 2);

var renderer = Viva.Graph.View.renderer(graph);
renderer.run();

上面的代码运行后会在 document.body 中绘制如下的图形

如果你想在自己的DOM元素里面绘制图形，你可以这样编写代码：

var graph = Viva.Graph.graph();
graph.addLink(1, 2);

// specify where it should be rendered:
var renderer = Viva.Graph.View.renderer(graph, {
  container: document.getElementById('graphDiv')
});
renderer.run();

上面的代码在节点1和2之间增加了一个链接。由于节点尚未在图中，他们将被创建。相当于下面的代码：

var graph = Viva.Graph.graph();
graph.addNode(1);
graph.addNode(2);
graph.addLink(1, 2);

var renderer = Viva.Graph.View.renderer(graph);
renderer.run();

自定义

VivaGraphJS 都是定制的。你可以很容易地改变节点和链接的外观。您还可以更改布局算法中显示的图形元素。例如：下面的代码允许您使用WebGL渲染，而不是默认的SVG。

var graph = Viva.Graph.graph();
graph.addLink(1, 2);

var graphics = Viva.Graph.View.webglGraphics();
var renderer = Viva.Graph.View.renderer(graph,{
    graphics : graphics
});
renderer.run();

graphics 类是负责在页面上的节点和链接。和渲染编排过程。改变节点的外观告诉graphics如何表示它们。这是一个六人，我跟在GitHub上图形的例子：

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();

运行的结果如下：

调整布局算法

图的性质不同。一些图有几百个节点和几个边缘（或链接），一些人可能连接每一个节点与其他。调整物理通常有助于获得最佳布局。考虑下面的例子：

var graphGenerator = Viva.Graph.generator();
var graph = graphGenerator.grid(3, 3);
var renderer = Viva.Graph.View.renderer(graph);
renderer.run();

图生成器是库的一部分，它可以产生经典的图形。grid生成器创建一个给定的列数和行的网格。但与默认参数的渲染是相当丑陋的：

让我们来调整原来的代码：

var graphGenerator = Viva.Graph.generator();
var graph = graphGenerator.grid(3, 3);

var layout = Viva.Graph.Layout.forceDirected(graph, {
    springLength : 10,
    springCoeff : 0.0005,
    dragCoeff : 0.02,
    gravity : -1.2
});

var renderer = Viva.Graph.View.renderer(graph, {
    layout : layout
});
renderer.run();

现在我们的代码运行的效果：

调整布局算法绝对是使用该库的最困难的部分之一。为了简化使用，它必须得到改进。在源代码中描述了每一个受力的算法参数。

本地构建

运行下面的代码

git clone https://github.com/anvaka/VivaGraphJS.git
cd ./VivaGraphJS
npm install
gulp release

组合/缩小代码应存放在 dist 文件夹。

相关链接

Github 地址：https://github.com/anvaka/VivaGraphJS