test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

add demo && rename some configuration name

Browse Source
This commit is contained in:
huangtong.ht 2018-09-03 14:47:42 +08:00
parent 9c7689d790
commit 40dbc9cc78
19 changed files with 105064 additions and 30722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CHANGELOG.md
View File

@ -2,6 +2,24 @@
---
#### 2.1.0
`2018-09-03`
* feat: svg render
* feat: plugin.layout.forceAtlas2
* feat: plugin.tool.fisheye
* feat: plugin.tool.textDisplay
* feat: plugin.tool.grid
* feat: plugin.template.tableSankey
* feat: plugin.edge.polyline
#### 2.0.5
`2018-07-12`
improve: add g6 arrow
#### 2.0.4
`2018-07-12`

74256
demos/assets/data/link-data.json Normal file
View File

File diff suppressed because it is too large Load Diff

2
demos/gallery-table-sankey.html → demos/gallery-usa-president-sankey.html
View File

@ -5,7 +5,7 @@
<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>
<title>画廊-美国总统信息桑基图</title>
</head>
<body>

2
demos/tree-dendrogram.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>紧凑树</title>
<title>系统树</title>
<style>
::-webkit-scrollbar {
display: none;

4
demos/tree-indented.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>紧凑树</title>
<title>缩进树</title>
<style>
::-webkit-scrollbar {
display: none;
@ -45,7 +45,7 @@
var layout = new G6.Layouts.IndentedTree({
direction: 'LR', // 方向（LR/RL/H）
indent: 30, // 缩进量
getVGap: function getVGap() /* d */ {
getVGap() /* d */ {
// 竖向间距
return 4;
}

2
demos/tree-mindmap.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>紧凑树</title>
<title>脑图树</title>
<style>
::-webkit-scrollbar {
display: none;

2
demos/yunqi-1.html
View File

@ -59,7 +59,7 @@
})
const graph = new G6.Graph({
container: 'mountNode',
height: 600,
height: window.innerHeight, // 画布高
fitView: 'cc',
animate: true,
plugins: [sankeyPlugin]

2
demos/yunqi-2.html
View File

@ -34,7 +34,7 @@
let simulation;
const graph = new G6.Graph({
container: 'mountNode',
height: 500,
height: window.innerHeight, // 画布高
fitView: 'cc',
layout: {
auto: 'once',

60
demos/yunqi-3.html
View File

@ -7,15 +7,71 @@
<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="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.6/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
<script src="./assets/d3-4.13.0.min.js"></script>
<script src="../build/plugins.js"></script>
<title>云栖 demo 3</title>
</head>
<body>
<div id="mountNode"></div>
<div id="mountNode" style="position: relative;">
<img class="legend" width="220" src="https://gw.alipayobjects.com/zos/rmsportal/AuLKMNbRvKidugdUCaXz.png" style="position: absolute;right: 120px;"/>
</div>
<script>
$.getJSON('./assets/data/link-data.json', data => {
const { Util } = G6;
const graph = new G6.Graph({
container: 'mountNode',
height: window.innerHeight, // 画布高
plugins: [
new G6.Plugins['tool.fisheye'],
new G6.Plugins['tool.highlightSubgraph'],
],
fitView:'autoZoom',
});
graph.node({
style: {
stroke: '#333'
}
})
graph.on('afteritemdraw', ({ item }) => {
const label = item.getLabel();
if (label) {
label.set('freezePoint', {
x: 0,
y: 0
});
}
});
graph.read(data);
// 画布向左偏移 1/6 的画布kuandu
const width = graph.getWidth();
graph.translate(-width/7, 0);
// 隐藏所有边
graph.getEdges().forEach(edge=>{
graph.hide(edge);
});
// 鼠标悬浮高亮节点，并显示一度关系
let showEdgesCache;
graph.on('node:mouseenter', ({item})=>{
const {
reNodes,
reEdges
} = Util.extract('bi', [item]);
graph.highlightSubgraph(reNodes.concat(reEdges));
reEdges.forEach(edge=>{
graph.show(edge);
})
showEdgesCache=reEdges
});
graph.on('node:mouseleave', ()=>{
graph.unhighlightGraph();
showEdgesCache.forEach(edge=>{
graph.hide(edge)
});
});
});
</script>
</body>
</html>

8
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/g6",
"version": "2.1.0-beta.20",
"version": "2.1.0-beta.21",
"description": "graph visualization frame work",
"main": "build/g6.js",
"homepage": "https://github.com/antvis/g6",
@ -109,8 +109,8 @@
"run": []
},
"dependencies": {
"@antv/g": "~3.1.0-beta.11",
"@antv/g2": "~3.2.7-beta.4",
"@antv/g": "~3.1.0",
"@antv/g2": "~3.2.7",
"@antv/hierarchy": "~0.3.13",
"@antv/scale": "^0.0.1",
"d3": "^5.4.0",
@ -124,4 +124,4 @@
"engines": {
"node": ">=8.9.0"
}
}
}

4
plugins/layout.forceAtlas2/layout.js
View File

@ -245,7 +245,7 @@ class Layout {
model.x = this.nodes[i].x;
model.y = this.nodes[i].y;
}
graph.changeLayout();
graph.updateNodePosition();
const fitView = graph.get('fitView');
fitView && graph.setFitView(fitView);
worker.terminate();
@ -262,7 +262,7 @@ class Layout {
model.x = this.nodes[i].x;
model.y = this.nodes[i].y;
}
graph.changeLayout();
graph.updateNodePosition();
const fitView = graph.get('fitView');
fitView && graph.setFitView(fitView);
onLayoutComplete();

12
plugins/template.maxSpanningForest/index.js
View File

@ -50,7 +50,8 @@ class Plugin {
menu: null,
edgeStyle: {
stroke: '#4F7DAB',
strokeOpacity: 0.65
strokeOpacity: 0.65,
endArrow: true
},
activedEdgeStyle: {
stroke: '#4C7295',
@ -80,7 +81,6 @@ class Plugin {
}
init() {
const graph = this.graph;
if (this.fisheye) {
const fisheye = new G6.Plugins['tool.fisheye']({
radius: 100
@ -139,7 +139,7 @@ class Plugin {
index
};
});
const forest = maxSpanningForest({nodes, edges});
const forest = maxSpanningForest({ nodes, edges });
forest.edges.forEach(edge => {
const {
index
@ -149,7 +149,6 @@ class Plugin {
graph.addFilter(item => {
return !item.isEdge || item.getModel().isTreeEdge;
});
this.setStyle();
this.interactive && this.setListener();
const menuCfg = this.menuCfg;
@ -176,9 +175,8 @@ class Plugin {
if (model.actived) {
return this.activedEdgeStyle;
}
return this.edgeStyle;
},
endArrow: true
return Util.isFunction(this.edgeStyle) ? this.edgeStyle(model) : this.edgeStyle;
}
});
graph.node({
label: this.node_label,

6
plugins/tool.grid/index.js
View File

@ -28,7 +28,7 @@ class Plugin {
* grid line style
* @type {string}
*/
type: 'point',
type: 'dot',
/**
* visible
@ -62,7 +62,7 @@ class Plugin {
const matrix = graph.getMatrix();
const type = this.type;
const lineWidth = type === 'line' ? 1 / matrix[0] : 2 / matrix[0];
if (type === 'point') {
if (type === 'dot') {
attrs.lineDash = null;
}
attrs.lineWidth = lineWidth;
@ -109,7 +109,7 @@ class Plugin {
const type = this.type;
return this['_get' + Util.upperFirst(type) + 'Path']();
}
// get point style grid path
// get dot style grid path
_getPointPath() {
const graph = this.graph;
const width = graph.getWidth();

16
src/controller/layout.js
View File

@ -22,10 +22,10 @@ class Controller extends Base {
auto: true,
/**
* layout processer
* layout processor
* @type {object}
*/
processer: null
processor: null
};
}
constructor(cfg) {
@ -57,13 +57,13 @@ class Controller extends Base {
}
});
}
changeLayout(processer) {
this.processer = processer;
changeLayout(processor) {
this.processor = processor;
this.layout();
}
layout() {
const graph = this.graph;
const processer = this.processer;
const processor = this.getLayoutProcessor();
graph.emit('beforelayout');
const nodes = graph.getNodes()
.filter(node => {
@ -86,12 +86,12 @@ class Controller extends Base {
.map(group => {
return group.getModel();
});
graph._executeLayout(processer, nodes, edges, groups);
graph._executeLayout(processor, nodes, edges, groups);
graph.updateNodePosition();
graph.emit('afterlayout');
}
getLayoutProcesser() {
return this.processer;
getLayoutProcessor() {
return this.processor ? this.processor : this.processer;
}
}

18
src/graph.js
View File

@ -128,15 +128,15 @@ class Graph extends Base {
initEvent() {
}
_executeLayout(processer, nodes, edges, groups) {
if (Util.isFunction(processer)) {
processer(nodes, edges, this);
} else if (Util.isObject(processer)) {
processer.nodes = nodes;
processer.edges = edges;
processer.groups = groups;
processer.graph = this;
processer.execute();
_executeLayout(processor, nodes, edges, groups) {
if (Util.isFunction(processor)) {
processor(nodes, edges, this);
} else if (Util.isObject(processor)) {
processor.nodes = nodes;
processor.edges = edges;
processor.groups = groups;
processor.graph = this;
processor.execute();
}
}
_pluginInit() {

8
src/mixin/layout.js
View File

@ -30,7 +30,7 @@ Mixin.AUGMENT = {
return layout;
} else if (Util.isFunction(layout) || Util.isObject(layout)) {
return {
processer: layout
processor: layout
};
}
return null;
@ -77,12 +77,12 @@ Mixin.AUGMENT = {
this.draw();
return this;
},
changeLayout(processer) {
this._getController('layout').changeLayout(processer);
changeLayout(processor) {
this._getController('layout').changeLayout(processor);
return this;
},
getLayout() {
return this._getController('layout').getLayoutProcesser();
return this._getController('layout').getLayoutProcessor();
}
};

14
src/tree.js
View File

@ -30,14 +30,14 @@ class Tree extends Graph {
});
});
}
_executeLayout(processer) {
_executeLayout(processor) {
const source = this.get('_sourceData');
if (Util.isFunction(processer)) {
processer(source.roots, this);
} else if (Util.isObject(processer)) {
processer.roots = source.roots;
processer.graph = this;
processer.execute();
if (Util.isFunction(processor)) {
processor(source.roots, this);
} else if (Util.isObject(processor)) {
processor.roots = source.roots;
processor.graph = this;
processor.execute();
}
}
getHierarchy(item) {

2
src/version.js
View File

@ -1 +1 @@
module.exports = '2.1.0-beta.20';
module.exports = '2.1.0-beta.21';

61350
test/test-spec.js
View File

File diff suppressed because it is too large Load Diff