Skip to content
XING Yun edited this page Mar 28, 2018 · 2 revisions

Sankey

Quick Reference

import { sankey } from 'vizart-path';
import 'vizart-path/dist/vizart-path.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},
};

const _data = ...
const _chart = sankey('#chart', options);
_chart.render(_data);

API

Default options:

{
    chart: {
        type: 'sankey',
        margin: NoMargin,
    },
    color: DefaultCategoricalColor,
    plots: {
        horizontal: true, // 'horizontal', 'vertical'
        layout: 32, // layout density
        nodeWidth: 15, // node width
        nodePadding: 10, //node padding
        colorfulLink: true,
        linkColor: '#000',
        linkOpacity: 0.2,
        nodeOpacity: 1,
        nodeFontSize: 14,
    }
}

horizontal

make a horizontal or vertical sankey. 'horizontal' by default

layout

layout density

nodeWidth

node width, 15 by default

nodePadding

padding of nodes

colorfulLink

use different colors for link types?

linkColor

universal link color, will take effect only when colorfulLink is set to false

linkOpacity

link opacity, 1 by default

nodeOpacity

node opacity, 1 by default

nodeFontSize

node font size, 14 by default.