test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

chore(demo): add sankey diagram

Browse Source
This commit is contained in:
yilin.qyl 2019-03-13 15:57:22 +08:00
parent 8e84babda0
commit 3cbc1b8e08
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
demos/sankey-diagram.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../src/behavior/behavior.js"></script>
</head>
<body>
<div id="mountNode"></div>
@ -11,9 +12,8 @@
<script src="./assets/sankey.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script>
const margin = {top: 1, right: 1, bottom: 6, left: 1};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const width = 960;
const height = 500;
const colors = ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9'];
G6.registerEdge('sankey', {
@ -21,7 +21,7 @@
const data = cfg.data;
const shape = group.addShape('path', {
attrs: {
stroke: 'rgba(0, 0, 0, 0.2)',
stroke: 'rgba(0,0,0,0.1)',
lineWidth: Math.max(1, data.dy),
path: path(data)
}
@ -31,8 +31,18 @@
}, 'line');
const graph = new G6.Graph({
container: 'mountNode',
width: 960,
height: 500,
width,
height,
nodeStyle: {
default: {
stroke: null
}
},
edgeStyle: {
active: {
stroke: 'rgba(0,0,0,0.3)'
}
}
});
var sankey = d3.sankey()
@ -59,8 +69,8 @@
size: [ 15, node.dy ],
shape: 'rect',
labelCfg: {
position: node.x > 480 ? 'left': 'right',
offset: 10,
position: node.x > width / 2 ? 'left': 'right',
offset: 5,
}
});
});
@ -77,6 +87,13 @@
});
graph.data({ nodes, edges });
graph.render();
graph.fitView();
graph.on('edge:mouseenter', e => {
graph.setItemState(e.item, 'active', true);
});
graph.on('edge:mouseleave', e => {
graph.setItemState(e.item, 'active', false);
});
});
</script>
</body>