g6/demos/plugin-text-display.html
2018-08-10 17:18:46 +08:00

72 lines
1.4 KiB
HTML

<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
<head>
<meta content="origin" name="referrer">
<title>text display</title>
<script src="../build/g6.js"></script>
<script src="../build/plugin.behaviour.analysis.js"></script>
<script src="../build/plugin.tool.textDisplay.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id='mountNode'></div>
<script>
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200,
size: 100
}, {
id: 'node2',
x: 300,
y: 200,
size: 10
}, {
id: 'node3',
x: 100,
y: 100,
size: 50
}, {
id: 'node4',
x: 300,
y: 100,
size: 20
}],
edges: [{
target: 'node2',
source: 'node1'
}, {
target: 'node3',
source: 'node2'
}, {
target: 'node4',
source: 'node3'
}, {
target: 'node1',
source: 'node4'
}, ]
};
const textDisplay = new G6.Plugins['tool.textDisplay']();
graph = new G6.Graph({
id: 'mountNode', // dom id
plugins: [textDisplay],
height: 1000,
});
graph.node({
label(model) {
return {
text: model.id,
stroke: '#fff',
lineWidth: 4
}
}
});
graph.read(data);
</script>
</body>