d3-sankey-diagram
Version:
Sankey diagram d3 plugin
73 lines (61 loc) • 1.62 kB
HTML
<meta charset="utf-8">
<style>
.links path {
opacity: 0.8;
}
.nodes text {
font-family: sans-serif;
font-size: 10pt;
}
.nodes line {
stroke: black;
stroke-width: 2px;
}
</style>
<svg width="400" height="200"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="../build/d3-sankey-diagram.umd.js"></script>
<script>
// Data
var graph = {
nodes: [
{"id": "s", "title": "Source"},
{"id": "a", "title": "A"},
{"id": "b", "title": "B"},
{"id": "z", "title": "Sink"},
],
links: [
{"source": "s", "target": "a", "type": "s", "value": 3},
{"source": "s", "target": "b", "type": "s", "value": 2},
{"source": "a", "target": "b", "type": "x", "value": 1},
{"source": "a", "target": "z", "type": "z", "value": 2},
{"source": "b", "target": "z", "type": "z", "value": 3}
]
};
var rankSets = [
{
type: 'same',
nodes: ['a', 'b'],
}
];
// Set up SVG
var svg = d3.select('svg');
var width = +svg.attr('width');
var height = +svg.attr('height');
var margin = { top: 10, left: 50, bottom: 10, right: 50 };
var i = -1;
var layout = d3.sankey()
.rankSets(rankSets)
.extent([
[margin.left, margin.top],
[width - margin.left - margin.right, height - margin.top - margin.bottom]]);
// Render
var color = d3.scaleOrdinal(d3.schemeCategory10);
var diagram = d3.sankeyDiagram()
.linkColor(function(d) { return color(d.type); });
layout(graph);
svg
.datum(graph)
.call(diagram);
</script>