mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 19:58:46 +08:00
111 lines
2.8 KiB
HTML
111 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Set States</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',
|
|
style: {
|
|
lineWidth: 2,
|
|
fill: '#fff',
|
|
opacity: 0.8
|
|
}
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
style: {
|
|
stroke: '#e2e2e2',
|
|
lineAppendWidth: 2
|
|
}
|
|
},
|
|
nodeStateStyle: {
|
|
highlight: {
|
|
opacity: 1
|
|
},
|
|
dark: {
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
edgeStateStyles: {
|
|
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> |