+
+
Basic Sankey
+
+ A simple Sankey diagram showing flow between source and target nodes.
+
+
`}>
+
+
+
+
+
+
Multi-Level Flow
+
+ Sankey diagrams can show multiple levels of flow through intermediate nodes.
+
+
`}>
+
+
+
+
+
+
Rich Tooltips
+
+ Use tooltipFormatter for full control over tooltip content.
+
+
{
+ if (params.type === "node" && params.node) {
+ return "" + params.name + "";
+ }
+ if (params.type === "link" && params.link) {
+ return params.link.source + " → " + params.link.target;
+ }
+ return "";
+};
+
+`}>
+
+
+
+
+
+
Interactive
+
+ Use onNodeClick and onLinkClick to handle interactions.
+
+
console.log(node)}
+ onLinkClick={(link) => console.log(link)}
+/>`}>
+
+
+
+
+
+
Drill-Down Filtering
+
+ Click a source node to filter the chart and show only its connections. Click again or use the reset button to restore the full view.
+
+
(null);
+
+const handleNodeClick = (node: { name: string }) => {
+ if (sourceNames.includes(node.name)) {
+ setSelectedSource(prev => prev === node.name ? null : node.name);
+ }
+};
+
+`}>
+
+
+
+