Question

我正在尝试为React找到一个sankey图组件。 Vis.JS包含D3和D3 Sankey插件 - react-vis。只需很少的努力就可以吸引桑基。有一些问题 - “无效的”阵列节点可能导致浏览器崩溃 - 可以通过验证解决，图中没有标签和/或“系列”的名称。 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添加了对反应的Sankey标签的支持，实际上没有实现，好抓！

我正在做的只是在节点<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>

等待一段时间，直到它被审核并在新版本中草拟。

反应-vis sankey字幕和传奇

1 个答案: