2019-03-18 14:25:18 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2019-09-24 11:30:15 +08:00
|
|
|
<head>
|
2020-02-14 10:10:54 +08:00
|
|
|
<meta charset="UTF-8" />
|
2019-09-24 11:30:15 +08:00
|
|
|
<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;
|
2019-03-18 14:25:18 +08:00
|
|
|
}
|
2019-09-24 11:30:15 +08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
2020-02-14 10:10:54 +08:00
|
|
|
|
2019-09-24 11:30:15 +08:00
|
|
|
<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({
|
2020-02-14 10:10:54 +08:00
|
|
|
size: [200, 160],
|
2019-09-24 11:30:15 +08:00
|
|
|
});
|
|
|
|
|
const graph = new G6.Graph({
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
width: 1000,
|
|
|
|
|
height: 800,
|
|
|
|
|
autoPaint: false,
|
2020-02-14 10:10:54 +08:00
|
|
|
plugins: [minimap],
|
2019-09-24 11:30:15 +08:00
|
|
|
modes: {
|
2020-02-14 10:10:54 +08:00
|
|
|
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',
|
|
|
|
|
},
|
|
|
|
|
],
|
2019-09-24 11:30:15 +08:00
|
|
|
},
|
|
|
|
|
defaultNode: {
|
|
|
|
|
size: [10, 10],
|
2019-10-10 20:01:23 +08:00
|
|
|
color: 'steelblue',
|
|
|
|
|
style: {
|
2019-09-29 12:11:28 +08:00
|
|
|
lineWidth: 2,
|
2019-09-24 11:30:15 +08:00
|
|
|
fill: '#fff',
|
2020-02-14 10:10:54 +08:00
|
|
|
opacity: 0.8,
|
|
|
|
|
},
|
2019-10-10 20:01:23 +08:00
|
|
|
},
|
|
|
|
|
defaultEdge: {
|
|
|
|
|
size: 1,
|
|
|
|
|
style: {
|
|
|
|
|
stroke: '#e2e2e2',
|
2020-02-14 10:10:54 +08:00
|
|
|
lineAppendWidth: 2,
|
|
|
|
|
},
|
2019-10-10 20:01:23 +08:00
|
|
|
},
|
|
|
|
|
nodeStateStyle: {
|
2019-09-24 11:30:15 +08:00
|
|
|
highlight: {
|
2020-02-14 10:10:54 +08:00
|
|
|
opacity: 1,
|
2019-09-24 11:30:15 +08:00
|
|
|
},
|
|
|
|
|
dark: {
|
2020-02-14 10:10:54 +08:00
|
|
|
opacity: 0.2,
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
},
|
2019-10-10 20:01:23 +08:00
|
|
|
edgeStateStyles: {
|
2019-09-24 11:30:15 +08:00
|
|
|
highlight: {
|
2020-02-14 10:10:54 +08:00
|
|
|
stroke: '#999',
|
|
|
|
|
},
|
|
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
});
|
|
|
|
|
$.getJSON('./assets/data/xiaomi.json', data => {
|
|
|
|
|
graph.data({
|
|
|
|
|
nodes: data.nodes,
|
|
|
|
|
edges: data.edges.map((edge, i) => {
|
|
|
|
|
edge.id = 'edge' + i;
|
2020-02-14 10:10:54 +08:00
|
|
|
return Object.assign({}, edge);
|
|
|
|
|
}),
|
2019-09-24 11:30:15 +08:00
|
|
|
});
|
2020-02-14 10:10:54 +08:00
|
|
|
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);
|
2019-03-18 14:25:18 +08:00
|
|
|
|
2019-09-24 11:30:15 +08:00
|
|
|
graph.render();
|
|
|
|
|
|
|
|
|
|
function ticked() {
|
|
|
|
|
graph.refreshPositions();
|
|
|
|
|
graph.paint();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2020-02-14 10:10:54 +08:00
|
|
|
</html>
|
