Sankey

Properties

• nameKeyStringoptional

  "name" 属性对应的 key 。

  默认值："name"

• dataKeyString | Number | Functionoptional

  The key of a group of data which should be unique in a SankeyChart.

  默认值："value"

• widthPercentage | Number

  The percentage value of the chart's width or a fixed width.

• heightPercentage | Number

  The percentage value of the chart's width or a fixed height.

• dataObject

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

  格式：

  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 },
  ],

• sortBooleanoptional

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

  默认值：true

• nodePaddingNumberoptional

  The padding between the nodes

  默认值：10

• nodeWidthNumber

  The width of node

  默认值：10

• linkCurvatureNumber

  The curvature of width

  默认值：0.5

• iterationsNumber

  The number of the iterations between the links

  默认值：32

• nodeObject | ReactElementoptional

  If set a 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}} />

• linkObject | ReactElementoptional

  If set a 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 }} />

• marginObject

  The sizes of whitespace around the container.

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

  格式：

  { top: 5, right: 5, bottom: 5, left: 5 }

• onClickFunctionoptional

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

• onMouseEnterFunctionoptional

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

• onMouseLeaveFunctionoptional

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

• align'left' | 'justify'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"

• 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"