dev gallery graph analyzer

This commit is contained in:
TomHuangCN 2018-07-24 11:30:36 +08:00
parent b299f5684c
commit ed89598b16
7 changed files with 43 additions and 49 deletions

View File

@ -6,15 +6,8 @@
<title>graph analyzer</title>
<script src="../build/g6.js"></script>
<script src="../build/plugin.template.maxSpanningForest.js"></script>
<script src="../build/plugin.behaviour.analysis.js"></script>
<script src="../build/plugin.tool.mapper.js"></script>
<script src="../build/plugin.tool.fisheye.js"></script>
<script src="../build/plugin.util.extractSubgraph.js"></script>
<!-- <script src="../build/plugin.util.maxSpanningForest.js"></script> -->
<script src="../build/plugin.tool.highlightSubgraph.js"></script>
<script src="../build/plugin.edge.quadraticCurve.js"></script>
<script src="../build/plugin.tool.minimap.js"></script>
<script src="../build/plugin.tool.textDisplay.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<style>
ul,
@ -71,8 +64,6 @@
//the plugins
const Mapper = G6.Plugins['tool.mapper'];
const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
const Highlighter = G6.Plugins['tool.highlightSubgraph'];
const FisheyePlugin = G6.Plugins['tool.fisheye'];
//the instances of plugins
const maxSpanningForest = new MaxSpanningForestPlugin({
layoutCfg: {
@ -87,13 +78,9 @@
}
}
});
const fisheye = new FisheyePlugin({
radius: 200
});
const nodeSizeMapper = new Mapper('node', 'userview', 'size', [20, 50], {
legendCfg: {
comtainerId: 'legend',
scale: 0.5
containerId: 'legend',
}
});
const edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 16], {
@ -101,8 +88,7 @@
});
const nodeColorMapper = new Mapper('node', 'stayTime', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
legendCfg: {
comtainerId: 'legend',
scale: 0.5
containerId: 'legend',
}
});
const minimapPlugin = new G6.Plugins['tool.minimap']({
@ -110,23 +96,19 @@
width: 180,
height: 120
});
const highlighter = new Highlighter();
const textDisplay = new G6.Plugins['tool.textDisplay']();
const Util = G6.Util;
graph = new G6.Graph({
id: 'mountNode', // dom id
// fitView: 'cc',
fitView: 'cc',
plugins: [
maxSpanningForest, nodeSizeMapper, nodeColorMapper, edgeSizeMapper, minimapPlugin, highlighter,
textDisplay, fisheye
maxSpanningForest, nodeSizeMapper, nodeColorMapper, edgeSizeMapper, minimapPlugin
],
minZoom: 0,
modes: {
default: ['panCanvas', 'wheelZoom']
},
height: 1000,
height: 600,
});
graph.read(data);
const minimap = document.getElementById('minimap');
@ -135,5 +117,4 @@
if (legend !== undefined) legend.style.display = 'none';
});
</script>
</body>

View File

@ -1,6 +1,6 @@
{
"name": "@antv/g6",
"version": "2.0.5-beta.1",
"version": "2.0.5-beta.3",
"description": "graph visualization frame work",
"main": "build/g6.js",
"homepage": "https://github.com/antvis/g6",
@ -119,4 +119,4 @@
"engines": {
"node": ">=8.9.0"
}
}
}

View File

@ -11,6 +11,12 @@ const G6 = require('@antv/g6');
const maxSpanningForest = require('./maxSpanningForest');
const Layout = require('../layout.forceAtlas2/layout');
const Util = G6.Util;
require('../tool.textDisplay/');
require('../tool.highlightSubgraph/');
require('../tool.fisheye/');
require('../util.extractSubgraph/');
require('../edge.quadraticCurve/');
require('../behaviour.analysis/');
class Plugin {
constructor(options) {
@ -36,6 +42,14 @@ class Plugin {
}
init() {
const graph = this.graph;
const highlighter = new G6.Plugins['tool.highlightSubgraph']();
const fisheye = new G6.Plugins['tool.fisheye']({
radius: 200
});
const textDisplay = new G6.Plugins['tool.textDisplay']();
graph.addPlugin(highlighter);
graph.addPlugin(fisheye);
graph.addPlugin(textDisplay);
graph.on('beforeinit', () => {
const layout = graph.get('layout');
if (!layout) {

View File

@ -50,7 +50,6 @@ class Plugin {
* @type {object}
*/
legendCfg: {
comtainerId: 'legend_container',
legendTitle: '',
scale: 1
},
@ -177,19 +176,19 @@ class Plugin {
const scaleType = this._getScaleType(data);
const channel = this.channel;
const graph = this.graph;
let comtainerId = this.legendCfg.comtainerId;
const containerId = this.legendCfg.containerId;
let legendContainer;
if (comtainerId === undefined) {
comtainerId = 'legend_container';
let legendContainer = document.getElementById(comtainerId);
legendContainer = Util.createDOM('<div id="' + comtainerId + '"class="legend-container"></div>');
if (containerId === undefined) {
legendContainer = Util.createDOM('<div class="legend-container"></div>');
const container = graph.getGraphContainer();
container.appendChild(legendContainer);
}
const Constructor = graph.getConstructor('Canvas');
const canvas = new Constructor({
containerId: comtainerId, // dom_id,
containerId, // dom_id,
containerDOM: legendContainer,
width: 500,
height: 500
});

View File

@ -52,18 +52,6 @@ class Graph extends Base {
*/
height: undefined,
/**
* Modes list
* @type {object}
*/
modes: {},
/**
* Current mode
* @type {string}
*/
mode: 'default',
/**
* Plugins
* @type {array}
@ -148,10 +136,13 @@ class Graph extends Base {
_pluginInit() {
const plugins = this.get('plugins');
plugins.forEach(plugin => {
plugin.graph = this;
plugin.init && plugin.init();
this._initPlugin(plugin);
});
}
_initPlugin(plugin) {
plugin.graph = this;
plugin.init && plugin.init();
}
_getTimer(name) {
return this.get('_timers')[name];
}
@ -251,6 +242,14 @@ class Graph extends Base {
getMouseEventWrapper() {
return this.get('_htmlElementContaniner');
}
/**
* @param {object} plugin - plugin instance
*/
addPlugin(plugin) {
const plugins = this.get('plugins');
this._initPlugin(plugin);
plugins.push(plugin);
}
/**
* @return {domobject} graphcontainer
*/

View File

@ -10,7 +10,8 @@ Mixin.CFG = {
* mode list key - value, key - mode name, value - behaviors
* @type {object}
*/
modes: null,
modes: {},
/**
* current mode name
* @type {string}

View File

@ -1 +1 @@
module.exports = '2.0.5-beta.1';
module.exports = '2.0.5-beta.3';