réagir-vis légendes sankey et la légende

Question

J'essaye de trouver un composant de diagramme de sankey pour React. Il y a un wrapper pour Vis.JS avec le plugin D3 et D3 Sankey - react-vis. Avec peu d'efforts dessine Sankey. Il y a un couple de problèmes - "un noeud non valide" tableaux peuvent faire tomber le navigateur - pourrait être résolu avec la validation, pas d'étiquettes et/ou des noms de "série" sur le diagramme. L'exemple de code pour Sankey est ci-dessous:

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

Ce diagramme est dessiné exactement comme dans la démo. Il n'y a aucun problème avec l'ajout de nœuds ou la personnalisation. Si vous savez comment afficher les noms des noeuds avec react-vis ou peut-être l'enveloppe de Google Cart, veuillez nous en informer.

Answer 1

Je viens de faire this PR pour ajouter un support sur les étiquettes pour le Sankey de rea-vis, qui n'était pas réellement mis en œuvre, bonne prise! Ce que je fais est simplement de rendre un élément <text> dans le nœud <g> et de changer la direction du texte en fonction de sa position dans le graphique entier.

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

Attendez un peu jusqu'à ce qu'il soit révisé et rédigé dans une nouvelle version.