mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
98 lines
2.4 KiB
HTML
98 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
.g6-tooltip {
|
|
border: 1px solid #e2e2e2;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #545454;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
padding: 10px 8px;
|
|
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="../build/minimap.js"></script>
|
|
<script src="./assets/d3-4.13.0.min.js"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
<script>
|
|
const minimap = new Minimap({ size: [ 200, 160 ] });
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 1000,
|
|
height: 800,
|
|
autoPaint: false,
|
|
plugins: [ minimap ],
|
|
modes: {
|
|
default: ['drag-canvas', {
|
|
type: 'tooltip',
|
|
formatText: model => { return model.name}
|
|
}, {
|
|
type: 'edge-tooltip',
|
|
formatText: (model, e) => {
|
|
const edge = e.item;
|
|
return '来源：' + edge.getSource().getModel().name + '<br/>去向：' + edge.getTarget().getModel().name;
|
|
}
|
|
}, {
|
|
type: 'activate-relations',
|
|
activeState: 'highlight',
|
|
inactiveState: 'dark'
|
|
}]
|
|
},
|
|
defaultNode: {
|
|
size: [10, 10],
|
|
color: 'steelblue'
|
|
},
|
|
defaultEdge: {
|
|
size: 1
|
|
},
|
|
nodeStyle: {
|
|
default: {
|
|
lineWidth: 2,
|
|
fill: '#fff',
|
|
opacity: 0.8
|
|
},
|
|
highlight: {
|
|
opacity: 1
|
|
},
|
|
dark: {
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
edgeStyle: {
|
|
default: { stroke: '#e2e2e2', lineAppendWidth: 2 },
|
|
highlight: { stroke: '#999' }
|
|
}
|
|
});
|
|
$.getJSON('./assets/data/xiaomi.json', data => {
|
|
graph.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
|
|
edge.id = 'edge' + i;
|
|
return Object.assign({}, edge);
|
|
}) });
|
|
const simulation = d3.forceSimulation()
|
|
.force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.5))
|
|
.force("charge", d3.forceManyBody())
|
|
.force("center", d3.forceCenter(500,300));
|
|
simulation
|
|
.nodes(data.nodes)
|
|
.on("tick", ticked);
|
|
simulation.force("link")
|
|
.links(data.edges);
|
|
|
|
graph.render();
|
|
|
|
function ticked() {
|
|
graph.refreshPositions();
|
|
graph.paint();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|