Реакция на подписи и легенды Санки

Question

Я пытаюсь найти компонент диаграммы Санки для React. Для Vis.JS есть оболочка с плагином D3 и D3 Sankey - react-vis, Это без особых усилий тянет Санки. Есть пара проблем - "недопустимые" узлы массива могут привести к сбою браузера - могут быть решены с помощью проверки, без меток и / или имен "серий" на диаграмме. Пример кода для Санки ниже:

  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>
      );
    }
  }

Эта диаграмма рисуется точно так же, как в демонстрации. Нет проблем с добавлением узлов или их настройкой. Если вы знаете, как показать имена узлов с react-vis или, возможно, Google Charts реагирует на оболочку, пожалуйста, сообщите.

Answer 1

Я просто сделал этот пиар, чтобы добавить поддержку над ярлыками для Sankey ofact-vis, который на самом деле не был реализован, хороший улов!

То, что я делаю, это просто сделать <text> элемент в узле <g> и изменение направления текста в зависимости от его положения на всем графике.

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

Просто подождите немного, пока он не будет рассмотрен и составлен в новом выпуске.