mirror of
https://gitee.com/antv/g6.git
synced 2024-12-14 01:21:33 +08:00
110 lines
3.4 KiB
HTML
110 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
|
|
|
|
<head>
|
|
<meta content="origin" name="referrer">
|
|
<title>graph analyzer</title>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="../build/plugin.template.maxSpanningForest.js"></script>
|
|
<script src="../build/plugin.tool.mapper.js"></script>
|
|
<script src="../build/plugin.tool.minimap.js"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id='mountNode'></div>
|
|
<div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div>
|
|
<div id='legend'></div>
|
|
<script>
|
|
var graph = null;
|
|
var clickOnNode = null;
|
|
|
|
$.getJSON('./assets/data/view-test.json', data => {
|
|
//the plugins
|
|
const Mapper = G6.Plugins['tool.mapper'];
|
|
const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
|
|
//the instances of plugins
|
|
let maxSpanningForest = new MaxSpanningForestPlugin({
|
|
layoutCfg: {
|
|
maxIteration: 600,
|
|
kg: 10,
|
|
prevOverlapping: true,
|
|
onLayoutComplete: function () {
|
|
const minimap = document.getElementById('minimap');
|
|
const legend = document.getElementById('legend');
|
|
if (minimap !== undefined) minimap.style.display = 'block';
|
|
if (legend !== undefined) legend.style.display = 'block';
|
|
}
|
|
}
|
|
});
|
|
let nodeSizeMapper = new Mapper('node', 'userview', 'size', [20, 50], {
|
|
legendCfg: {
|
|
containerId: 'legend',
|
|
title: 'UV',
|
|
layout: 'horizontal',
|
|
// formatter: function(num) {
|
|
// console.log(num);
|
|
// num = num * num;
|
|
// if (num >= 100000000) {
|
|
// return num / 100000000 + '亿';
|
|
// } if (num >= 10000) {
|
|
// return num / 10000 + '万';
|
|
// }
|
|
// return num;
|
|
// }
|
|
}
|
|
});
|
|
let edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 16], {
|
|
legendCfg: null
|
|
});
|
|
let nodeColorMapper = new Mapper('node', 'stayTime', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
|
|
legendCfg: {
|
|
containerId: 'legend',
|
|
title: 'Stay Time',
|
|
layout: 'horizontal'
|
|
}
|
|
});
|
|
let minimapPlugin = new G6.Plugins['tool.minimap']({
|
|
container: 'minimap',
|
|
width: 180,
|
|
height: 120
|
|
});
|
|
|
|
const Util = G6.Util;
|
|
|
|
graph = new G6.Graph({
|
|
id: 'mountNode', // dom id
|
|
fitView: 'autoZoom',
|
|
plugins: [
|
|
maxSpanningForest,
|
|
nodeColorMapper,
|
|
edgeSizeMapper,
|
|
nodeSizeMapper,
|
|
minimapPlugin
|
|
],
|
|
modes: {
|
|
default: ['panCanvas', 'wheelZoom']
|
|
},
|
|
height: 500,
|
|
});
|
|
graph.read(Util.cloneDeep(data));
|
|
// graph.getNodes().forEach(node=>{
|
|
// graph.toFront(node);
|
|
// // node.getGraphicGroup().toFront();
|
|
// });
|
|
// graph.on('afterchange', ()=>{
|
|
// graph.getNodes().forEach(node=>{
|
|
// // graph.toFront(node);
|
|
// node.getGraphicGroup().toFront();
|
|
// });
|
|
// });
|
|
const minimap = document.getElementById('minimap');
|
|
// const legend = document.getElementById('legend');
|
|
if (minimap !== undefined) minimap.style.display = 'none';
|
|
// if (legend !== undefined) legend.style.display = 'none';
|
|
});
|
|
|
|
</script>
|
|
</body>
|