1

我正在尝试为 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-visGoogle Charts 反应包装器或可能显示节点名称，请告知。

4

1 回答 1

1

我刚刚做了这个 PR来为 react-vis 的 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>

稍等片刻，直到它在新版本中得到审查和起草。

于 2017-05-21T07:07:16.330 回答