企业官网建设流程全解析

• 数据可视化
• 图表库
• 前端

react-vis 是一套基于 React 与 d3 的可组合式数据可视化组件库，本文将以官方 Getting Started 指南 为主线，完整覆盖从 CodePen 在线体验、npm/yarn 安装、create-react-app 建项目，到用XYPlot组合出第一张折线图的全部实操路径。读完本文，你将能够独立搭建一个 react-vis 工程并理解其“组件即图表”的核心渲染模型（含子组件绘制顺序的控制）。

前置说明：react-vis 已进入维护终止状态。仓库根目录的 DEPRECATED.md 明确说明该库目前没有活跃维护者，不再接收补丁与新特性，社区任何人可 fork 接手。本文介绍的内容与写法适用于已发布的版本，当前仓库packages/react-vis/package.json中记录的版本为 1.12.1，peerDependencies要求react/react-dom^16.8.3，engines要求 Node>=14.18.0。

最快路径：在 CodePen 中直接体验 react-vis

如果只是想快速验证 react-vis 的图表效果、或者临时做原型，不需要搭建任何本地工程。react-vis 的每个已发布版本都通过 unpkg 这类 CDN 开放访问，官方提供了一个开箱即用的 CodePen 模板（在“CodePen”搜索栏检索 Uber Visualization 团队发布的 react-vis 示例即可找到），可以直接基于它修改数据与组件开始作图。

同样地，在非 Node 环境中，也可以像引用普通前端库一样通过 HTML 标签直接引入编译后的产物（以下为官方 README 中的示例写法，react-vis/dist/style.css与react-vis/dist/dist.min.js即构建产物路径）：

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css"> <script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>

引入后，全局reactVis对象即可直接使用。官方在文档中还提及可按版本号锁定 CDN 资源，例如引用 1.6.7 版本的https://unpkg.com/react-vis@1.6.7/dist/dist.min.js。

安装 react-vis 模块

在自己的项目中使用 react-vis，首先需要通过命令行安装。官方推荐 npm：

npm install react-vis

也可以使用 yarn：

yarn add react-vis

从packages/react-vis/package.json可以看到，包本身依赖了 d3 生态的多个模块（d3-array、d3-scale、d3-shape、d3-hexbin、d3-sankey、d3-voronoi、d3-contour等），同时依赖prop-types与react-motion（用于动画）。安装完成后即可从react-vis顶层入口导入组件——入口文件 packages/react-vis/src/index.js 对外导出了XYPlot、LineSeries、XAxis、YAxis、HorizontalGridLines、VerticalGridLines等全部直角坐标组件，以及RadialChart、Treemap、Sankey、RadarChart、Sunburst、ParallelCoordinates等高级图表组件，还有makeVisFlexible/FlexibleXYPlot等自适应工具。

别忘了样式

react-vis 的图形渲染依赖自己的样式表。官方文档强调，样式导入方式有很多种，且从技术上讲是可选的（不导入时组件仍会渲染），但为了保证坐标轴、刻度等元素的外观符合预期，建议导入。常用写法是在入口处直接导入编译后的 CSS：

import '../node_modules/react-vis/dist/style.css';

如果使用 Sass 工程，也可以按需引入子样式，例如只引入图例（legends）相关样式：

@import "~react-vis/dist/styles/legends";

样式的组织方式可见 packages/react-vis/src/main.scss，它依次汇入了treemap、plot、legends、radial-chart四组样式，全部源码位于 packages/react-vis/src/styles 目录下。

创建新项目：create-react-app 脚手架

接下来从一个空项目开始搭建可视化应用。官方文档推荐使用 create-react-app 脚手架：

npm install -g create-react-app

然后创建应用并安装依赖：

create-react-app my-awesome-vis-app cd my-awesome-vis-app npm install react-vis

完成以上三步后，编辑脚手架默认生成的App.js，替换成下面的折线图代码（这是官方 Getting Started 文档给出的完整示例，可直接复制运行）：

import React, { Component } from 'react'; import './App.css'; import '../node_modules/react-vis/dist/style.css'; import {XYPlot, LineSeries} from 'react-vis'; class App extends Component { render() { const data = [ {x: 0, y: 8}, {x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 9}, {x: 4, y: 1}, {x: 5, y: 7}, {x: 6, y: 6}, {x: 7, y: 3}, {x: 8, y: 2}, {x: 9, y: 0} ]; return ( <div className="App"> <XYPlot height={300} width={300}> <LineSeries data={data} /> </XYPlot> </div> ); } } export default App;

然后在命令行启动开发服务器：

npm run start

浏览器打开后，你的第一张折线图就出现在页面上了。注意代码第 3 行导入了 react-vis 样式表——文档特别提示“有多种导入方式，且是可选的”，但 create-react-app 允许在 JS 中直接导入样式表，这是最简便的一种。

你的第一张图表：理解 XYPlot 组件树

react-vis 的语法刻意向传统 React 语法靠拢：一切都是“拥有 props、可能还有 children 的组件”。

每个 react-vis 图表都必须包裹在XYPlot中，且width与height是必填属性：

<XYPlot height={300} width={300} />

这一约束可以在源码中得到印证：packages/react-vis/src/plot/xy-plot.js 中XYPlot的propTypes将width、height声明为PropTypes.number.isRequired，缺少任一属性都会触发 React 的 props 校验警告。

图表中的所有元素——数据系列、坐标轴、网格线等——都是XYPlot的子组件。在官方文档的示例中，一个“完整”的图表通常由网格线、坐标轴与系列共同组成：

const data = [ {x: 0, y: 8}, {x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 9}, {x: 4, y: 1}, {x: 5, y: 7}, {x: 6, y: 6}, {x: 7, y: 3}, {x: 8, y: 2}, {x: 9, y: 0} ]; <XYPlot height={300} width={300}> <VerticalGridLines /> <HorizontalGridLines /> <XAxis /> <YAxis /> <LineSeries data={data} /> </XYPlot>

data是传入每个系列（series）的数据数组，数组中的每个对象对应图上的一个点，官方 XYPlot 文档 列出了数据点对象可携带的常用属性：x、y为坐标，opacity、fill、stroke控制视觉通道，strokeWidth/strokeStyle控制线宽与虚实，color（在未指定fill/stroke时生效）、size以及style（CSS 属性对象）均为可选。

顺序即层级：子组件的绘制顺序

和传统 React 一样，组件的书写顺序决定了绘制顺序。在上一个例子中，网格线写在系列之前，因此网格线被绘制在折线图层的下方；若把LineSeries提到最前面，网格线就会被绘制到折线的上方、盖住折线。

<XYPlot height={300} width={300}> <LineSeries data={data} /> <VerticalGridLines /> <HorizontalGridLines /> <XAxis /> <YAxis /> </XYPlot>

两种顺序的实际渲染差异如下（左图为网格线覆盖在折线上方，右图为网格线位于折线下方）：

这一行为与源码实现完全一致：XYPlot.render()在 packages/react-vis/src/plot/xy-plot.js 中先渲染一个包裹<svg>的div，然后按this._getClonedChildComponents()返回的数组顺序逐个cloneElement并放入 SVG 树（见 xy-plot.js）。React 的 DOM 插入顺序即 SVG 元素的层叠顺序，因此越靠前的子组件越先绘制、层级越靠下。这一点在混用网格线、坐标轴、Hint/Crosshair 等交互组件时尤其关键。

从源码看 XYPlot 的渲染机制

在XYPlot之上叠加几个源码级细节，能帮助你更精准地控制图表：

• 空数据保护：XYPlot内部实现了_isPlotEmpty()检测（xy-plot.js），当所有系列的数据为空时会提前返回一个空的div，避免渲染出错；该行为可通过dontCheckIfEmpty属性关闭。
• 默认缩放体系：XYPlot会在 xy-plot.js 中基于内部尺寸自动生成xRange: [0, innerWidth]、yRange: [innerHeight, 0]以及默认的颜色、透明度、尺寸范围，用户可通过xDomain、yDomain、xType、yType等 props 覆盖默认的 scale 行为（详见 Scales and Data）。
• 交互与动画：XYPlot支持onClick、onMouseMove、onTouchStart等一整套鼠标/触摸事件，并通过animation属性为系列过渡提供动画支持（见 Animation 文档 与源码中的AnimationPropType）。
• Canvas 系列并存：renderCanvasComponents（xy-plot.js）会单独收集LineSeriesCanvas、MarkSeriesCanvas等 Canvas 渲染系列，放入CanvasWrapper中与 SVG 系列共存渲染，这也是“顺序即层级”之外值得注意的第二个渲染通道。

更多进阶方向

本文覆盖的是 react-vis 的入门闭环：在线体验 → 安装 → 建项目 → 第一张折线图 → 理解组件树与绘制顺序。要继续深入，仓库内还提供了成体系的官方文档：

• XYPlot 完整文档：数据点属性、accessor（getX/getY）与自定义 scale 的完整说明；
• Series 文档 与 Axes 文档：各系列类型与坐标轴配置；
• Grids 文档：网格线的具体用法；
• Hint 与 Crosshair（以及 Crosshair）：数据提示与十字线交互；
• Scales and Data 与 Animation：高级数据映射与动画；
• Responsive Vis 与packages/react-vis/src/make-vis-flexible.js：让图表随容器自适应缩放。

仓库中的可运行示例集中在 packages/showcase 下（如折线图packages/showcase/plot/line-chart.js、散点图packages/showcase/plot/scatterplot.js），本地开发时可在packages/react-vis目录执行yarn && yarn start启动示例工程，直接对照源码观察各组件的真实效果。

• 数据可视化
• 图表库
• 前端