React + 数据可视化 | CSS-Tricks

数据可视化（dataviz）和 SVG 之间存在着天然的联系。SVG 是一种基于几何图形的图形格式，而几何图形正是以引人入胜且准确的方式直观地显示数据的必要条件。

SVG 具备“可视化”部分，但 SVG 比编程更具声明性。要编写消化数据并将其转换为 SVG 可视化的代码，JavaScript 很适合。通常，这意味着使用 D3.js（“数据驱动文档”），它非常适合将数据和 SVG 配对。

您知道还有什么擅长处理数据吗？React。

为 dataviz 提供支持的数据通常是 JSON，而 React 中的“状态”是 JSON。将该 JSON 数据作为状态提供给 React 组件，它将在渲染时访问所有数据，并且值得注意的是，当该状态发生变化时，它将重新渲染。

React + D3 + SVG = 非常适合 dataviz

我认为这个想法在过去几年里一直在流行。Fraser Xu 几年前就谈论过它

我喜欢使用 React，因为我使用的所有内容都是组件，可以是我在项目中编写的任何组件，也可以是 NPM 上优秀的人员提供的第三方组件。当我们想要使用它时，只需 import 或 require 它，然后传入数据，我们就能获得可视化结果。

这个组件问题很重要。我最近遇到了一些非常好的库，它们将 React + D3 整合在一起，以组件的形式呈现。因此，您不是利用这些库，而是仍然手动将实际的 dataviz 组件组合在一起，它们提供了一堆准备好的组件，可以为它们提供数据并进行渲染。

nivo

nivo 提供了一套丰富的数据可视化组件，构建在强大的 d3 和 Reactjs 库之上。

Victory

Victory 是一套针对 React 和 React Native 的模块化图表组件。Victory 使您能够轻松上手，而不会牺牲灵活性。使用完全可自定义的样式和行为创建独一无二的数据可视化效果。Victory 为 Web 和 React Native 应用程序使用相同的 API，以实现轻松的跨平台图表制作。