Sankey

Props

• dataSankeyData

  The source data, including the array of nodes, and the relationships, represented by links.

  Note that Sankey requires a specific data structure. Each node should have a unique index in the nodes array, and each link should reference these nodes by their indices. This is different from other chart types in Recharts, which accept arbitrary data.

  格式：

  nodes: [
    { name: 'Visit' },
    { name: 'Direct-Favourite' },
    { name: 'Page-Click' },
    { name: 'Detail-Favourite' },
    { name: 'Lost' },
  ],
  links: [
    { source: 0, target: 1, value: 3728.3 },
    { source: 0, target: 2, value: 354170 },
    { source: 2, target: 3, value: 62429 },
    { source: 2, target: 4, value: 291741 },
  ],

• align"justify" | "left"optional

  If set to 'justify', the start nodes will be aligned to the left edge of the chart and the end nodes will be aligned to the right edge of the chart. If set to 'left', the start nodes will be aligned to the left edge of the chart.

  默认值："justify"

• childrenReactNodeoptional

• classNamestringoptional

• dataKeyFunction | number | stringoptional

  dataKey prop in Sankey defines which key in the link objects represents the value of the link in Tooltip only.

  Unlike other charts where dataKey is used to extract values from the data array, in Sankey charts, the value of each link is directly taken from the 'value' property of the link objects.

  默认值："value"

• heightnumber | stringoptional

  The height of chart container. Can be a number or a percent string like "100%".

  示例：

  • Chart sizing guide

• iterationsnumberoptional

  The number of the iterations between the links

  默认值：32

• linkFunction | React.SVGProps<SVGPathElement> | ReactNodeoptional

  If set an object, the option is the configuration of links. If set a React element, the option is the custom react element of drawing the links.

  格式：

  <Sankey link={MyCustomComponent} />
  <Sankey link={{ fill: #77c878 }} />

• linkCurvaturenumberoptional

  The curvature of width

  默认值：0.5

• marginPartial<Margin>optional

  Empty space around the container.

  默认值：{"top":5,"right":5,"bottom":5,"left":5}

• nameKeyFunction | number | stringoptional

  Name represents each sector in the tooltip. This allows you to extract the name from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the name.

  默认值："name"

• nodeFunction | Props | ReactNodeoptional

  If set an object, the option is the configuration of nodes. If set a React element, the option is the custom react element of drawing the nodes.

  格式：

  <Sankey node={MyCustomComponent} />
  <Sankey node={{stroke: #77c878, strokeWidth: 2}} />

• nodePaddingnumberoptional

  The padding between the nodes

  默认值：10

• nodeWidthnumberoptional

  The width of node

  默认值：10

• sortbooleanoptional

  Whether to sort the nodes on the y axis, or to display them as user-defined.

  默认值：true

• styleReact.CSSPropertiesoptional

• verticalAlign"justify" | "top"optional

  Controls the vertical spacing of nodes within a depth. 'justify' distributes nodes evenly and balances link paths, while 'top' positions the group starting from the top edge of the chart.

  默认值："justify"

• widthnumber | stringoptional

  The width of chart container. Can be a number or a percent string like "100%".

  示例：

  • Chart sizing guide

• onClickReact.MouseEventHandler<T>optional

  The customized event handler of click on the area in this group

• onMouseEnterReact.MouseEventHandler<T>optional

  The customized event handler of mouseenter on the area in this group

• onMouseLeaveReact.MouseEventHandler<T>optional

  The customized event handler of mouseleave on the area in this group