在React Js中是否有针对Burtin抗生素样品的图形库？

Question

我有一个示例数据，我想在React Js中通过这样的图形来可视化：

这是JavaScript代码的链接： Burtin’s Antibiotics Protovis

有人知道我可以使用哪个React图库来实现这一点吗？

预先感谢

Answer 1

不推荐使用本示例的库：

  

Protovis不再处于积极开发中。

     

Protovis的最终版本是v3.3.1（4.7 MB）。 Protovis团队   现在正在开发新的可视化库D3.js，并对其进行了改进   支持动画和交互。 D3建立在许多   Protovis中的概念；有关更多详细信息，请阅读介绍   并浏览示例。

因此，您应该继续研究D3和React。这是一篇有关它的文章：https://medium.com/turo-engineering/react-meets-d3-6a40881d0d73

  

当人们谈论渲染图表或任何类型的数据时   在Web可视化中，D3.js是事实上的标准。所以，如果我们   想要建立漂亮且可重复使用的图表，我们绝对应该   利用D3的力量。

     

我们如何整合它？但是我们有一个问题，我们的Web客户端是内置的   在React中，该库与D3的配合不佳：两者都使用   更新DOM的方法非常不同。虽然React使用   虚拟DOM和定义明确的生命周期来计算和优化DOM   更新后，D3使用浏览器的DOM和数据属性。

     

如果我们要构建精美的图表，并使用简洁的动画，   当我们处理SVG元素及其位置时，我们的脑袋爆裂，   必须使用D3，因此我们需要找到一种方法来使这两个库   可以一起玩。