React

Question

我们有一个表示有向图的数据集。目前，我们在UI中的网格（slick grid）中显示此数据，如下所示。

Parent Nodes of Selected Node:
------------------------------
Selected Node
-- Parent Node1
-- Parent Node2
-- Parent Node3
.
.

Child Nodes of Selected Node:
-----------------------------
Selected Node
-- Child Node1
-- Child Node2
-- Child Node3
.
.

这种显示数据的方式存在的问题是，它不直观，对眼睛也不好。通过一些依赖图可视化可以更好地呈现它。

是否有一些类似于/更好的库{/ 3}}可以帮助我创建依赖图可视化？这里的任何线索都非常感激。

如果可以放置一些比较表，将会很有用，将来会对所有读者有所帮助。

注意：我不是在寻找图表库。

Answer 1

您提到的要求是1. Allows the user to interact with the graph. 2. Light weight. 3. Can scale to show 1000's of nodes. 4. Should be able to zoom in and zoom out.

我认为https://www.npmjs.com/package/react-graph-vis可以解决问题。

您唯一需要做的就是编写一个脚本，将您的数据格式转换为react-graph-vis api格式。

但如果这不是您所需要的，我会将一些图表库粘贴给您。

• http://js.cytoscape.org/#notation/graph-model
• http://sigmajs.org/
• http://getspringy.com/

更新

有一个与反应相关的回购：

• https://github.com/danielcaldas/react-d3-graph

Answer 2

如果您还没有尝试过，请尝试使用d3.js.使用它可以进行任何数据可视化。

以下是一些例子我相信你能找到你喜欢的东西。 https://github.com/d3/d3/wiki/gallery