mirror of
https://gitee.com/antv/g6.git
synced 2024-12-06 13:48:26 +08:00
114 lines
3.4 KiB
HTML
114 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 => {
|
|
$.getJSON('./assets/data/view-test-antv.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: {
|
|
prevOverlapping: true,
|
|
prune: true
|
|
}
|
|
});
|
|
let nodeSizeMapper = new Mapper('node', 'weight', 'size', [15, 50], {
|
|
legendCfg: {
|
|
containerId: 'legend',
|
|
height: 100,
|
|
title: {
|
|
text: 'UV',
|
|
fill: '#333'
|
|
},
|
|
layout: 'vertical',
|
|
itemFormatter(text) {
|
|
if (text >= 100000000) {
|
|
return text / 100000000 + '亿';
|
|
} if (text >= 10000) {
|
|
return text / 10000 + '万';
|
|
}
|
|
return text;
|
|
}
|
|
}
|
|
});
|
|
let edgeSizeMapper = new Mapper('edge', 'weight', 'size', [1, 8], {
|
|
legendCfg: null
|
|
});
|
|
let nodeColorMapper = new Mapper('node', 'weight', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
|
|
legendCfg: {
|
|
containerId: 'legend',
|
|
title: {
|
|
text: 'Stay Time'
|
|
},
|
|
layout: 'horizontal',
|
|
width: 100,
|
|
}
|
|
});
|
|
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.on('afterrender', ()=>{
|
|
// const nodes = graph.getNodes();
|
|
// let centerNode = nodes[0];
|
|
// nodes.forEach(node => {
|
|
// if(centerNode.getModel().userview < node.getModel().userview) centerNode = node;
|
|
// });
|
|
// graph.focus(centerNode);
|
|
// });
|
|
graph.read(Util.cloneDeep(data));
|
|
|
|
// 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>
|