<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div }]
};
G6.registerNode('customNode', {
draw(item){
const group = item.getGraphicGroup();
const model = item.getModel();
group.addShape('text', {
attrs: {
x: -15,
y: -5,
fill: '#000',
text: model.label,
textBaseline: 'top'
}
});
return group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r:20,
stroke:'#000'
}
});
}
});
var graph = new G6.Graph({
id: 'mountNode', // dom id
height: window.innerHeight,
//plugins: [template, nodeSizeMapper, nodeColorMapper, edgeSizeMapper],
animate: true,
layout: {}
});
var dagre = new G6.Layouts['Dagre']({
nodesep: function nodesep() {
return graph.getWidth() / 50;
},
ranksep: function ranksep() {
return graph.getHeight() / 25;
},
marginx: function marginx() {
return graph.getWidth() / 8;
},
marginy: function marginy() {
return graph.getHeight() / 8;
},
useEdgeControlPoint: false
});
graph.read(data);
graph.changeLayout(dagre);
</script>
</body>
</html>
相关文章：