2018-07-10 14:59:24 +08:00
|
|
|
<!doctype html>
|
|
|
|
|
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta content="origin" name="referrer">
|
|
|
|
|
<title>plugin-forceAtlas2</title>
|
|
|
|
|
<script src="../build/g6.js"></script>
|
2018-07-12 21:38:24 +08:00
|
|
|
<script src="../build/plugin.layout.forceAtlas2.js"></script>
|
2018-07-10 14:59:24 +08:00
|
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id='mountNode'></div>
|
|
|
|
|
<script>
|
|
|
|
|
$.getJSON('../../test/fixtures/viralMarketing.json', data => {
|
|
|
|
|
const Plugin = G6.Plugins['layout.forceAtlas2'];
|
|
|
|
|
const layout_params = {
|
|
|
|
|
max_iteration: 1500,
|
|
|
|
|
prev_overlapping: true,
|
|
|
|
|
kr: 15,
|
|
|
|
|
mode: 'normal',
|
|
|
|
|
barnes_hut: false, // may be counter-productive on small networks
|
|
|
|
|
ks: 0.1,
|
|
|
|
|
dissuade_hubs: false
|
|
|
|
|
};
|
|
|
|
|
graph = new G6.Graph({
|
|
|
|
|
id: 'mountNode', // dom id
|
|
|
|
|
fitView: 'autoZoom',
|
|
|
|
|
plugins: [new Plugin(layout_params)],
|
|
|
|
|
minZoom: 0,
|
|
|
|
|
modes: {
|
|
|
|
|
default: ['panCanvas']
|
|
|
|
|
},
|
|
|
|
|
height: 1000,
|
|
|
|
|
});
|
|
|
|
|
graph.edge({
|
|
|
|
|
style() {
|
|
|
|
|
return {
|
|
|
|
|
endArrow: true,
|
|
|
|
|
lineWidth: 2
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
graph.read(data);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
