mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
dev gallery graph analyzer
This commit is contained in:
parent
b299f5684c
commit
ed89598b16
@ -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>
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
@ -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) {
|
||||
|
@ -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
|
||||
});
|
||||
|
27
src/graph.js
27
src/graph.js
@ -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
|
||||
*/
|
||||
|
@ -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}
|
||||
|
@ -1 +1 @@
|
||||
module.exports = '2.0.5-beta.1';
|
||||
module.exports = '2.0.5-beta.3';
|
||||
|
Loading…
Reference in New Issue
Block a user