数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载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.1peerDependencies要求react/react-dom^16.8.3engines要求 Node14.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 relstylesheet hrefhttps://unpkg.com/react-vis/dist/style.css script typetext/javascript srchttps://unpkg.com/react-vis/dist/dist.min.js/script引入后全局reactVis对象即可直接使用。官方在文档中还提及可按版本号锁定 CDN 资源例如引用 1.6.7 版本的https://unpkg.com/react-vis1.6.7/dist/dist.min.js。安装 react-vis 模块在自己的项目中使用 react-vis首先需要通过命令行安装。官方推荐 npmnpm install react-vis也可以使用 yarnyarn 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 的图形渲染依赖自己的样式表。官方文档强调样式导入方式有很多种且从技术上讲是可选的不导入时组件仍会渲染但为了保证坐标轴、刻度等元素的外观符合预期建议导入。常用写法是在入口处直接导入编译后的 CSSimport ../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 classNameApp 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} / /XYPlotdata是传入每个系列series的数据数组数组中的每个对象对应图上的一个点官方 XYPlot 文档 列出了数据点对象可携带的常用属性x、y为坐标opacity、fill、stroke控制视觉通道strokeWidth/strokeStyle控制线宽与虚实color在未指定fill/stroke时生效、size以及styleCSS 属性对象均为可选。顺序即层级子组件的绘制顺序和传统 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 系列并存renderCanvasComponentsxy-plot.js会单独收集LineSeriesCanvas、MarkSeriesCanvas等 Canvas 渲染系列放入CanvasWrapper中与 SVG 系列共存渲染这也是“顺序即层级”之外值得注意的第二个渲染通道。更多进阶方向本文覆盖的是 react-vis 的入门闭环在线体验 → 安装 → 建项目 → 第一张折线图 → 理解组件树与绘制顺序。要继续深入仓库内还提供了成体系的官方文档XYPlot 完整文档数据点属性、accessorgetX/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启动示例工程直接对照源码观察各组件的真实效果。赞分享数据可视化图表库前端【免费下载链接】react-visData Visualization Components项目地址https://gitcode.com/gh_mirrors/re/react-vis点击查看免费下载相关推荐使用 react-vis 绘制你的第一张折线图XYPlot 组合式图表的完整入门指南使用 react vis 绘制你的第一张折线图XYPlot 组合式图表的完整入门指南 react vis 是一套“可组合”的 React 数据可视化组件库它数据可视化图表库前端Sigma.js 快速上手指南从 CDN 与 npm 安装到渲染第一张网络图Sigma.js 快速上手指南从 CDN 与 npm 安装到渲染第一张网络图 本指南以 packages/website/docs/quickstart.md数据可视化前端图形学Visdom 快速上手指南5 分钟搭建实时可视化仪表盘并绘制第一张图Visdom 快速上手指南5 分钟搭建实时可视化仪表盘并绘制第一张图 本指南基于官方 Quick Start 文档带你从零开始安装 Visdom、启动本地可数据可视化前端上一篇终极指南如何为你的全球团队配置Hoppscotch多语言API测试环境下一篇快速构建本地语音智能体Speech-to-Speech 终极指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考