VivaGraphJS 基于 JavaScript 的 Web 端绘画插件 - 文章教程

VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

发布于 2019-12-12 字数 5901 浏览 2033 评论 0

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 中绘制如下的图形

VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

如果你想在自己的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();

运行的结果如下:

VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

调整布局算法

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

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

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

VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

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

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

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

VivaGraphJS 基于 JavaScript 的 Web 端绘画插件

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

本地构建

运行下面的代码

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

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

相关链接

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论