3.12.0 • Published 6 days ago
@visx/sankey v3.12.0
@visx/sankey
Sankey diagrams visualize the directed flow between nodes in an acyclic network. This package
contains react
components for visualizing sankey diagrams and largely mirrors
d3-sankey
.
Many components take the same input sankey
data as defined in as specified in the
d3-sankey
module to output a graph of the sankey layout. For
convenience, this package also exports the d3-sankey
utility to
generate this format.
Installation
npm install --save @visx/sankey
Usage
The @visx/sankey
package exports a wrapped version of d3-sankey
for flexible usage, as well as a
<Sankey />
component for rendering the sankey layout.
// equivalent to `import { sankey } from 'd3-sankey';`
import { sankey } from '@visx/sankey';
const generator = sankey();
const graph = generator({
nodes: [{ name: 'node 1' }, { name: 'node 2' }, { name: 'node 3' }],
links: [
{ source: 0, target: 1, value: 10 },
{ source: 1, target: 2, value: 5 },
],
});
import { Sankey, sankeyCenter } from '@visx/sankey';
const nodes = [{ name: 'node 1' }, { name: 'node 2' }, { name: 'node 3' }];
const links = [
{ source: 0, target: 1, value: 10 },
{ source: 1, target: 2, value: 5 },
];
const data = { nodes, links };
return (
<svg>
<Sankey root={data} nodeAlign={sankeyCenter} size={[100, 100]} />
</svg>
);
The layout output can also be customized by providing a children function to the <Sankey />
component.
import { Sankey, sankeyCenter } from '@visx/sankey';
import { Group } from '@visx/group';
import { BarRounded, LinkHorizontal } from '@visx/group';
const nodes = [{ name: 'node 1' }, { name: 'node 2' }, { name: 'node 3' }];
const links = [
{ source: 0, target: 1, value: 10 },
{ source: 1, target: 2, value: 5 },
];
const data = { nodes, links };
return (
<svg>
<Sankey root={data} nodeAlign={sankeyCenter} size={[100, 100]}>
{({ graph, createPath }) => (
<>
<Group>
{graph.links.map((link, i) => (
<LinkHorizontal
key={i}
data={link}
path={createPath}
fill="transparent"
stroke="#f50057"
strokeWidth={link.width}
strokeOpacity={0.5}
/>
))}
</Group>
<Group>
{graph.nodes.map(({ y0, y1, x0, x1, name }, i) => (
<BarRounded
key={i}
width={x1 - x0}
height={y1 - y0}
x={x0}
y={y0}
radius={3}
fill="#f50057"
all
/>
))}
</Group>
</>
)}
</Sankey>
</svg>
);
3.13.0-alpha.0
6 days ago
3.12.0
2 months ago