在react中使用哪个库来绘制简单的图形节点和链接？

Question

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

现在我需要绘制图--随机节点/链接/组图。我在react-d3中看到了Force layouts，但不是简单的图形。我查看了Cytoscape -它没有正式的React构建，似乎正在进行中(我在堆栈溢出上发现了一个包装器，但在cyto团队发布它之前，我一直在犹豫是否使用它。

因此，问题是：-如果我使用react-d3，我在哪里可以找到一些示例(不是图表，也不是“强制”布局)-如果直接使用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

dr:尽可能避免使用react-*包装器包(用于外部库)。除了基本的用法之外，他们以后会倾向于限制你。

实际上，没有任何理由需要等待Cytoscape的React适配器。该适配器是为一些想要创建非常简单(主要是)可视化的React.Component的人设计的--比如一个简单的页面，与科学出版物一起发布。

通常，这些用于外部库的react-*包倾向于落入以下两个类别之一：(1)简单库或(2)复杂库。对于(1)，如果包装的库有一个小特性集来覆盖，那么react-*包就可以了。对于(2)，这些包装器包往往只覆盖API的一小部分。对于(1)和(2)，您都依赖于包装器是最新的--或者被锁定在特性之外。

随着你的应用程序越来越开发，你是否愿意冒着不得不重写的风险，因为你的应用程序高度耦合到一个你的应用程序无法满足的react-*包装包？

总的来说，使用react-*包装器包没有太多好处。特别是对于像您这样的更复杂的情况，您只需限制您可以使用的功能以及如何使用它们。

无论您选择什么图形库--无论是Cytoscape还是其他--我建议您只编写自己的React.Component来满足您的应用程序的需求。

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

Answer 3

上面的资源已经有4年的历史了，所以应该更新了。我会使用react-digraph或react-flow -两者似乎都得到了很好的支持。