<script>
import { LayerCake, Svg } from 'layercake';
import Sankey from './_components/Sankey.svelte';
import data from './_data/sankey-data.js';
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
{data}
>
<Svg>
<Sankey
colorNodes={d => '#00bbff'}
colorLinks={d => '#00bbff35'}
/>
</Svg>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
import * as Sankey from 'd3-sankey';
const { data, width, height } = getContext('LayerCake');
export let colorLinks = d => 'rgba(0, 0, 0, .2)';
export let colorNodes = d => '#333';
export let colorText = d => '#263238';
export let nodeWidth = 5;
export let nodePadding = 10;
export let linkSort = null;
export let nodeId = d => d.id;
export let nodeAlign = Sankey.sankeyLeft;
$: sankey = Sankey.sankey()
.nodeAlign(nodeAlign)
.nodeWidth(nodeWidth)
.nodePadding(nodePadding)
.nodeId(nodeId)
.size([$width, $height])
.linkSort(linkSort);
$: sankeyData = sankey($data);
$: link = Sankey.sankeyLinkHorizontal();
$: fontSize = $width <= 320 ? 8 : 12;
</script>
<style>
text {
pointer-events: none;
}
</style>
<g class="sankey-layer">
<g class='link-group'>
{#each sankeyData.links as d}
<path
d={link(d)}
fill='none'
stroke={colorLinks(d)}
stroke-opacity='0.5'
stroke-width={d.width} />
{/each}
</g>
<g class='rect-group'>
{#each sankeyData.nodes as d, i}
<rect
x={d.x0}
y={d.y0}
height={d.y1 - d.y0}
width={d.x1 - d.x0}
fill={colorNodes(d)} />
<text
x={d.x0 < $width / 4 ? d.x1 + 6 : d.x0 - 6}
y={(d.y1 + d.y0) / 2}
dy="{(fontSize / 2) - 2}"
style="fill: {colorText(d)};
font-size: {fontSize}px;
text-anchor: {d.x0 < $width / 4 ? 'start' : 'end'};">
{d.id}
</text>
{/each}
</g>
</g>
export default {
nodes: [
{ id: 'A1' },
{ id: 'A2' },
{ id: 'A3' },
{ id: 'B1' },
{ id: 'B2' },
{ id: 'B3' },
{ id: 'B4' },
{ id: 'C1' },
{ id: 'C2' },
{ id: 'C3' },
{ id: 'D1' },
{ id: 'D2' }
],
links: [
{ source: 'A1', target: 'B1', value: 27 },
{ source: 'A1', target: 'B2', value: 9 },
{ source: 'A2', target: 'B2', value: 5 },
{ source: 'A2', target: 'B3', value: 11 },
{ source: 'A3', target: 'B2', value: 12 },
{ source: 'A3', target: 'B4', value: 7 },
{ source: 'B1', target: 'C1', value: 13 },
{ source: 'B1', target: 'C2', value: 10 },
{ source: 'B4', target: 'C2', value: 5 },
{ source: 'B4', target: 'C3', value: 2 },
{ source: 'B1', target: 'D1', value: 4 },
{ source: 'C3', target: 'D1', value: 1 },
{ source: 'C3', target: 'D2', value: 1 }
]
};