react-vis sankeyのキャプションと伝説

Question

私はReactのSankeyダイアグラムコンポーネントを見つけようとしています。 D3とD3 Sankeyプラグイン - react-visを持つVis.JSのラッパーがあります。それは少しの努力でサンキーを引きます。いくつかの問題があります - "無効な"配列ノードがブラウザをダウンさせる可能性があります - バリデーション、ラベルなし、および/またはダイアグラム上の "シリーズ"の名前で解決できます。 Sankeyのサンプルコードは次のとおりです。

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

私はちょうどthis PRを実際に実装されていなかったreact-visのSankeyのラベルに追加するようにしました。

私がやっていることは、単純にノード<g>の<text>要素をレンダリングし、グラフ全体の位置に応じてテキストの方向を変更することです。

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

新しいリリースでレビューされ、起草されるまでちょっと待ってください。