react-vis sankey captions and legend

Question

I am trying to find a sankey diagram component for React. There is a wrapper for Vis.JS with D3 and D3 Sankey plugin - react-vis. It with little effort draws Sankey. There are a couple of problems - "an invalid" array nodes can bring down browser - could be solved with validation, no labels and/or names of "series" on the diagram. The sample code for Sankey is below:

  const nodes = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
  const links = [
    {source: 0, target: 1, value: 10, opacity: 0.2},
    {source: 0, target: 2, value: 20},
    {source: 1, target: 2, value: 30}
  ];

  class Flow extends Component {
    render() {
      return  (
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{marginLeft: '50px', marginRight: '50px', flexGrow: 1}}>
            <Sankey
              nodes={nodes}
              links={links}
              width={200}
              height={200}
            />
          </div>
        </div>
      );
    }
  }

This diagram gets drawn exactly as in the demo. There no problem with adding nodes or customizing them. If you know how to show names of the nodes with react-vis or perhaps the Google Charts react wrapper, please advise.

Answer 1

I just made this PR to add support over labels for the Sankey of react-vis, which was actually not implemented, good catch!

What I'm doing is simply render a <text> element in the node <g> and changing the text direction depending on its position in the whole graph.

<text
  textAnchor={node.x < width / 2 ? 'start' : 'end'}
  dy=".35em"
  x={node.x < width / 2 ? nWidth + 10 : -10}
  y={node.dy / 2}
>
  {node.name}
</text>

Just wait for a little while until it's reviewed and drafted in a new release.