mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 03:38:20 +08:00
feat: add grid plugin
This commit is contained in:
TomHuangCN
parent
287aac2430
commit
533ff19bfd
42
demos/gallery-grid.html
Normal file
42
demos/gallery-grid.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>画廊-网格</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="../build/plugin.tool.grid.js"></script>
|
||||
|
||||
<script>
|
||||
const plugin = new G6.Plugins['tool.grid']()
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [plugin]
|
||||
});
|
||||
graph.read(data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -7,69 +7,39 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||||
<script src="../build/g6.js"></script>
|
||||
<script src="../build/plugin.layout.forceAtlas2.js"></script>
|
||||
<script src="../build/plugin.layout.circle.js"></script>
|
||||
<script src="../build/plugin.util.dataCleaner.js"></script>
|
||||
<script src="../build/plugin.layout.dagre.js"></script>
|
||||
<script src="../build/plugin.tool.tooltip.js"></script>
|
||||
<script src="../build/plugins.js"></script>
|
||||
<title>测试</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script>
|
||||
const plugin = new G6.Plugins['tool.tooltip']();
|
||||
const plugin = new G6.Plugins['tool.grid']()
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
title: 'aaa',
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
title: 'bbb',
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ plugin ]
|
||||
});
|
||||
graph.node({
|
||||
tooltip(model) {
|
||||
return [
|
||||
['id', model.id],
|
||||
['x', model.x],
|
||||
['y', model.y],
|
||||
['标题', model.title]
|
||||
];
|
||||
modes: {
|
||||
default: ['panCanvas', 'wheelZoom']
|
||||
},
|
||||
label(model) {
|
||||
return model.title;
|
||||
}
|
||||
});
|
||||
graph.edge({
|
||||
tooltip(model) {
|
||||
return [
|
||||
['来源', model.source],
|
||||
['去向', model.target],
|
||||
['标题', model.title]
|
||||
];
|
||||
}
|
||||
plugins: [plugin]
|
||||
});
|
||||
graph.read(data);
|
||||
setTimeout(()=>{
|
||||
graph.update('node1', {
|
||||
title: 'sss'
|
||||
});
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6",
|
||||
"version": "2.1.0-beta.13",
|
||||
"version": "2.1.0-beta.14",
|
||||
"description": "graph visualization frame work",
|
||||
"main": "build/g6.js",
|
||||
"homepage": "https://github.com/antvis/g6",
|
||||
|
||||
@ -12,6 +12,7 @@ module.exports = {
|
||||
'tool.minimap': require('./tool.minimap/'),
|
||||
'tool.tooltip': require('./tool.tooltip/'),
|
||||
'tool.fisheye': require('./tool.fisheye/'),
|
||||
'tool.gird': require('./tool.grid/'),
|
||||
'tool.textDisplay': require('./tool.textDisplay/'),
|
||||
'util.randomData': require('./util.randomData/')
|
||||
};
|
||||
|
||||
@ -8,8 +8,10 @@ const Util = G6.Util;
|
||||
|
||||
class Plugin {
|
||||
constructor(options) {
|
||||
Util.mix(this, options);
|
||||
this._freezeElements = {};
|
||||
Util.mix(this, {
|
||||
// cache freeze elements
|
||||
_freezeElements: {}
|
||||
}, options);
|
||||
}
|
||||
init() {
|
||||
const graph = this.graph;
|
||||
|
||||
181
plugins/tool.grid/index.js
Normal file
181
plugins/tool.grid/index.js
Normal file
@ -0,0 +1,181 @@
|
||||
/**
|
||||
* @fileOverview grid
|
||||
* @author huangtonger@aliyun.com
|
||||
*/
|
||||
|
||||
const G6 = require('@antv/g6');
|
||||
const Util = G6.Util;
|
||||
|
||||
class Plugin {
|
||||
constructor(options) {
|
||||
Util.mix(this, {
|
||||
/**
|
||||
* grid cell
|
||||
* @type {number}
|
||||
*/
|
||||
cell: 16,
|
||||
|
||||
/**
|
||||
* grid line style
|
||||
* @type {object}
|
||||
*/
|
||||
line: {
|
||||
stroke: '#A3B1BF',
|
||||
lineWidth: 0.5
|
||||
},
|
||||
|
||||
/**
|
||||
* grid line style
|
||||
* @type {string}
|
||||
*/
|
||||
type: 'point',
|
||||
|
||||
/**
|
||||
* visible
|
||||
* @type {boolean}
|
||||
*/
|
||||
visible: true
|
||||
}, options);
|
||||
}
|
||||
/**
|
||||
* init plugin
|
||||
*/
|
||||
init() {
|
||||
const graph = this.graph;
|
||||
graph.on('afterinit', () => {
|
||||
this._draw();
|
||||
});
|
||||
graph.on('afterviewportchange', () => {
|
||||
this.update();
|
||||
});
|
||||
graph.on('beforechangesize', () => {
|
||||
this.update();
|
||||
});
|
||||
!this.visible && this.hide();
|
||||
}
|
||||
// draw grid
|
||||
_draw() {
|
||||
const graph = this.graph;
|
||||
const path = this._getPath();
|
||||
const group = graph.getRootGroup();
|
||||
const attrs = Util.mix({}, this.line);
|
||||
const matrix = graph.getMatrix();
|
||||
const type = this.type;
|
||||
const lineWidth = type === 'line' ? 1 / matrix[0] : 2 / matrix[0];
|
||||
if (type === 'point') {
|
||||
attrs.lineDash = null;
|
||||
}
|
||||
attrs.lineWidth = lineWidth;
|
||||
attrs.path = path;
|
||||
const gridEl = group.addShape('path', {
|
||||
attrs,
|
||||
capture: false,
|
||||
zIndex: 0
|
||||
});
|
||||
gridEl.toBack();
|
||||
this.gridEl = gridEl;
|
||||
}
|
||||
// get line style grid path
|
||||
_getLinePath() {
|
||||
const graph = this.graph;
|
||||
const width = graph.getWidth();
|
||||
const height = graph.getHeight();
|
||||
const tl = graph.getPoint({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
const br = graph.getPoint({
|
||||
x: width,
|
||||
y: height
|
||||
});
|
||||
const cell = this.cell;
|
||||
const flooX = Math.ceil(tl.x / cell) * cell;
|
||||
const flooY = Math.ceil(tl.y / cell) * cell;
|
||||
const path = [];
|
||||
for (let i = 0; i <= br.x - tl.x; i += cell) {
|
||||
const x = flooX + i;
|
||||
path.push([ 'M', x, tl.y ]);
|
||||
path.push([ 'L', x, br.y ]);
|
||||
}
|
||||
for (let j = 0; j <= br.y - tl.y; j += cell) {
|
||||
const y = flooY + j;
|
||||
path.push([ 'M', tl.x, y ]);
|
||||
path.push([ 'L', br.x, y ]);
|
||||
}
|
||||
return path;
|
||||
}
|
||||
// get grid path
|
||||
_getPath() {
|
||||
const type = this.type;
|
||||
return this['_get' + Util.upperFirst(type) + 'Path']();
|
||||
}
|
||||
// get point style grid path
|
||||
_getPointPath() {
|
||||
const graph = this.graph;
|
||||
const width = graph.getWidth();
|
||||
const height = graph.getHeight();
|
||||
const tl = graph.getPoint({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
const br = graph.getPoint({
|
||||
x: width,
|
||||
y: height
|
||||
});
|
||||
const cell = this.cell;
|
||||
const flooX = Math.ceil(tl.x / cell) * cell;
|
||||
const flooY = Math.ceil(tl.y / cell) * cell;
|
||||
const matrix = graph.getMatrix();
|
||||
const detalx = 2 / matrix[0];
|
||||
const path = [];
|
||||
for (let i = 0; i <= br.x - tl.x; i += cell) {
|
||||
const x = flooX + i;
|
||||
for (let j = 0; j <= br.y - tl.y; j += cell) {
|
||||
const y = flooY + j;
|
||||
path.push([ 'M', x, y ]);
|
||||
path.push([ 'L', x + detalx, y ]);
|
||||
}
|
||||
}
|
||||
return path;
|
||||
}
|
||||
show() {
|
||||
this.gridEl.show();
|
||||
this.visible = true;
|
||||
}
|
||||
hide() {
|
||||
this.gridEl.hide();
|
||||
this.visible = false;
|
||||
}
|
||||
getCell() {
|
||||
const cell = this.cell;
|
||||
const graph = this.graph;
|
||||
const matrix = graph.getMatrix();
|
||||
const scale = matrix[0];
|
||||
if (cell * scale < 9.6) {
|
||||
return 9.6 / scale;
|
||||
}
|
||||
return cell;
|
||||
}
|
||||
update(cfg) {
|
||||
Util.mix(this, cfg);
|
||||
const path = this._getPath();
|
||||
const gridEl = this.gridEl;
|
||||
const graph = this.graph;
|
||||
const zoom = graph.getZoom();
|
||||
const type = this.type;
|
||||
const lineWidth = type === 'line' ? 1 / zoom : 2 / zoom;
|
||||
if (this.cell * zoom < 8 || this.cell * zoom > 32) {
|
||||
this.cell = 16 / zoom;
|
||||
}
|
||||
gridEl.attr('lineWidth', lineWidth);
|
||||
gridEl.attr('path', path);
|
||||
}
|
||||
destroy() {
|
||||
const gridEl = this.gridEl;
|
||||
gridEl && gridEl.remove();
|
||||
}
|
||||
}
|
||||
|
||||
G6.Plugins['tool.grid'] = Plugin;
|
||||
|
||||
module.exports = Plugin;
|
||||
@ -1 +1 @@
|
||||
module.exports = '2.1.0-beta.13';
|
||||
module.exports = '2.1.0-beta.14';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user