哪个库用于绘制简单的图形节点，反应中的链接？

Question

我看到了 react-d3。上次我将它用于图表（在 React 之前），它一直很棒，直到图例、边距、轴上的标签的布局需要调整。在 d3 之上使用 c3 和其他库，使事情变得更容易。

现在我需要绘制图表 - 随机 node/link/group 图表。我在 react-d3 中看到了 Force layouts - 但不是简单的图形。我查看了 Cytoscape - 它没有正式的 React 版本，它似乎正在运行（我在 stack-overflow 上找到了一个包装器，但我犹豫要不要使用它，直到 cyto 团队发布它。

因此问题是： - 如果我使用 react-d3，我在哪里可以找到一些样本（不是图表也不是 'Force' 布局） - 如果直接使用 react-d3 有点太低级，d3 上的一个好的库现在可用于 React 吗？（我愿意牺牲 d3 的超灵活性，以简化简单的库）。

非常欢迎任何帮助和指点。

谢谢。

Answer 1

你可以看看下面的库，

https://github.com/lavrton/react-konva

https://github.com/Flipboard/react-canvas

https://github.com/reactjs/react-art

https://github.com/alex3165/react-leaflet-draw

https://github.com/PaulLeCam/react-leaflet

Answer 2

Tl;dr：尽可能避免 react-* 包装程序包（对于外部库）。除了基本用例之外，他们以后往往会限制您。

没有任何理由等待 Cytoscape 的 React 适配器。该适配器是为一些想要创建非常简单（大部分）仅可视化的人而构建的 React.Components -- 比如一个简单的页面与科学出版物一起出现。

一般来说，那些 react-* 外部库的包往往属于两类之一，(1) 简单库或 (2) 复杂库。对于 (1)，一个 react-* 包可能没问题，如果它包装的 lib 有一个小的功能集要覆盖。对于 (2)，这些包装包往往只覆盖 API 的一小部分。对于 (1) 和 (2)，您依赖于包装器是最新的——或者被锁定在功能之外。

随着您的应用程序越来越发达，您是否愿意冒着重写的风险，因为您的应用程序与您的应用程序已经过时的 react-* 包装程序包高度耦合？

总的来说，使用 react-* 包装程序包并没有太大好处。特别是对于像您这样更复杂的案例，您只需限制可以使用的功能以及使用它们的方式即可。

无论您选择什么图形库——无论是 Cytoscape 还是其他——我建议只编写您自己的 React.Component 根据您的应用程序需要定制的。

就个人而言，我唯一会使用的 react-* 包是那些直接添加功能到 React 的包，例如动画、路由等

Answer 3

看看react-sigma，这是一个相当强大和快速的网络图形渲染引擎。它支持 WebGL 和 Canvas，允许自定义节点和边缘形状，具有运行动画插件，如 ForceAtlas2、Filter。它还可以使用自定义组件进行扩展。

简单用例

let graph = {
    nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], 
    edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]}
<Sigma graph={graph}
        onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
    <RandomizeNodePositions />
</Sigma>

从外部文件加载和运行 ForceAtlas2:

<Sigma style={{width:"200px", height:"200px"}}>
  <LoadJSON path="/public/data.json">
     <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} linLogMode>
  </LoadJSON>
</Sigma>

使用您自己的组件进行扩展：

class MyCustomSigma extends React.Component {
    constructor(props) {
        super(props)
        props.sigma.graph.nodes().forEach(n => { n.label = "ID:" + n.id });
    };
    render = () => null;
}
...
return  <Sigma>
    <MyCustomSigma>
</Sigma>

Answer 4

以上资源已有 4 年历史，因此想更新。我会使用 react-digraph or react-flow - 两者似乎都得到了很好的支持。

哪个库用于绘制简单的图形节点，反应中的链接？

which library to use to draw simple graphs nodes,links in react?

d3.js

reactjs

cytoscape.js