mirror of
https://gitee.com/antv/g6.git
synced 2024-12-10 15:54:25 +08:00
85 lines
2.5 KiB
HTML
85 lines
2.5 KiB
HTML
<!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>
|
|
<script src="../build/plugin.layout.forceAtlas2.js"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
<script src="./assets/d3-4.13.0.min.js"></script>
|
|
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/d3-4.13.0.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id='mountNode'></div>
|
|
<script>
|
|
const { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } = d3;
|
|
const force = {
|
|
execute() {
|
|
const nodes = this.nodes;
|
|
const edges = this.edges;
|
|
const graph = this.graph;
|
|
const width = graph.getWidth();
|
|
const height = graph.getHeight();
|
|
const simulation = forceSimulation(nodes)
|
|
.force('charge', forceManyBody().distanceMax(width * 3))
|
|
.force('link', forceLink(G6.Util.cloneDeep(edges))
|
|
.id(model => {
|
|
return model.id;
|
|
})
|
|
.strength(1)
|
|
)
|
|
.force('center', forceCenter(width / 2, height / 2))
|
|
.force('collision', forceCollide().radius(model => {
|
|
return model.width / 2 * 1.2;
|
|
}));
|
|
simulation.stop();
|
|
for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
|
|
simulation.tick();
|
|
}
|
|
nodes.forEach(node => {
|
|
delete node.vx;
|
|
delete node.vy;
|
|
});
|
|
}
|
|
};
|
|
|
|
$.getJSON('../../test/fixtures/viralMarketing.json', data => {
|
|
const Plugin = G6.Plugins['layout.forceAtlas2'];
|
|
const layoutParams = {
|
|
prevOverlapping: true,
|
|
kr: 20,
|
|
mode: 'normal',
|
|
// barnesHut: false, // may be counter-productive on small networks
|
|
ks: 0.1,
|
|
dissuadeHubs: false,
|
|
prune: true
|
|
};
|
|
graph = new G6.Graph({
|
|
id: 'mountNode', // dom id
|
|
fitView: 'autoZoom',
|
|
plugins: [new Plugin(layoutParams)],
|
|
// layout: {
|
|
// processer: force
|
|
// },
|
|
minZoom: 0,
|
|
modes: {
|
|
default: ['panCanvas']
|
|
},
|
|
height: 1000,
|
|
});
|
|
graph.edge({
|
|
style() {
|
|
return {
|
|
endArrow: true,
|
|
lineWidth: 2
|
|
};
|
|
}
|
|
});
|
|
graph.read(data);
|
|
});
|
|
</script>
|
|
</body>
|