{"id":20613176,"url":"https://github.com/sherwinshen/data-visualization","last_synced_at":"2026-03-19T16:42:40.236Z","repository":{"id":125493377,"uuid":"499803198","full_name":"sherwinshen/data-visualization","owner":"sherwinshen","description":"📊数据可视化入门指南，主要包括 Canvas、SVG、ECharts、AntV 等","archived":false,"fork":false,"pushed_at":"2022-06-06T07:11:46.000Z","size":1677,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-06T18:31:49.593Z","etag":null,"topics":["antv","canvas","data-visualization","echarts","svg"],"latest_commit_sha":null,"homepage":"https://www.yuque.com/sherwin-sw/fe/data-visualization","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sherwinshen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-04T11:13:18.000Z","updated_at":"2024-07-28T03:46:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"dc652a21-407b-4fac-9295-961b5d78ec91","html_url":"https://github.com/sherwinshen/data-visualization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sherwinshen/data-visualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherwinshen%2Fdata-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherwinshen%2Fdata-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherwinshen%2Fdata-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherwinshen%2Fdata-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sherwinshen","download_url":"https://codeload.github.com/sherwinshen/data-visualization/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherwinshen%2Fdata-visualization/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30221193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T14:02:48.375Z","status":"ssl_error","status_checked_at":"2026-03-07T14:02:43.192Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antv","canvas","data-visualization","echarts","svg"],"created_at":"2024-11-16T11:09:01.546Z","updated_at":"2026-03-07T16:04:06.876Z","avatar_url":"https://github.com/sherwinshen.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![封面](./imgs/datav.png)\n\n\u003e 数据可视化代码地址：[data-visualization（Github）](https://github.com/sherwinshen/data-visualization)，数据可视化专题系列文章：\n\u003e \n\u003e - [【专题篇】数据可视化之入门指南](https://www.yuque.com/sherwin-sw/fe/data-visualization)\n\u003e - [【专题篇】数据可视化之ECharts篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-echarts)\n\u003e - [【专题篇】数据可视化之地图篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-map)\n\u003e - [【专题篇】数据可视化之SVG篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-svg)\n\u003e - [【专题篇】数据可视化之项目示例](https://www.yuque.com/sherwin-sw/fe/data-visualization-projects)\n\n# 1. 序言\n\n数据可视化，是关于数据视觉表现形式的科学技术研究，其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量（源自百度百科）。当前，在前端领域数据可视化的技术五花八门非常之多，以下为常见的技术选型：\n\n![数据可视化-技术选型](./imgs/datav-tech-arch.png)\n\n# 2. 技术选型\n\n\u003e 打*内容为重点关注内容，可移步专题篇查看更多内容。\n\n## 2.1 底层支持\n\nChrome 使用 Skia 作为底层 2D 绘图引擎，向上层开放了 Canvas、SVG、WebGL、HTML 等绘图能力。\n\n### 2.1.1 Canvas\n\ncanvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。\n\n#### 2.1.1.1 绘图步骤\n\n1. 编写 canvas HTML 标签（需要指定宽高）\n2. 获取 canvas DOM 对象\n3. 创建 canvas 对象\n4. 设置绘图属性并调用绘图 API\n\n#### 2.1.1.2 基础示例\n\n绘制点、矩形、直线和圆形\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003ecanvas example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- step1. 编写 canvas HTML 标签--\u003e\n    \u003ccanvas id=\"canvas\" height=\"800\" width=\"800\"\u003e\u003c/canvas\u003e\n    \u003cscript\u003e\n      // step2. 获取 canvas DOM 对象\n      const canvas = document.getElementById(\"canvas\");\n      // step3. 创建 canvas 对象\n      const ctx = canvas.getContext(\"2d\");\n      // step4. 设置绘图属性并调用绘图 API\n      /* 正方形绘制 */\n      ctx.fillStyle = \"red\";\n      ctx.fillRect(0, 0, 50, 50);\n      /* 路径绘制 */\n      ctx.beginPath();\n      ctx.lineWidth = 1;\n      ctx.strokeStyle = \"blue\";\n      ctx.moveTo(100, 100); // 起点\n      ctx.lineTo(250, 75); // 可添加多个中间点\n      ctx.lineTo(300, 100); // 最后一个即为终点\n      ctx.stroke();\n      /* 圆形绘制 */\n      ctx.beginPath(); // 结束上一段的绘制\n      ctx.lineWidth = 10;\n      ctx.strokeStyle = \"green\";\n      ctx.fillStyle = \"yellow\";\n      ctx.arc(200, 200, 50, 0, 2 * Math.PI);\n      ctx.stroke();\n      ctx.fill();\n      /* 点绘制 */\n      ctx.beginPath(); // 结束上一段的绘制\n      ctx.lineWidth = 1;\n      ctx.strokeStyle = \"red\";\n      ctx.moveTo(150, 150);\n      ctx.lineTo(151, 151); // 也就是一个像素的路径\n      ctx.stroke();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2.1.2 SVG*\n\nSVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。更多内容详见[【专题篇】数据可视化化之SVG篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-svg)。\n\n#### 2.1.2.1 绘图步骤\n\n1. 编写 svg 标签，指定宽高\n2. 编写 svg 绘图标签\n3. 编写绘图属性和样式\n\n#### 2.1.2.2 基础示例\n\n绘制点、矩形、直线和圆形\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003esvg-基础案例\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003csvg height=\"800\" width=\"800\"\u003e\n    \u003crect width=\"50\" height=\"50\" style=\"fill: red\" /\u003e\n    \u003cline x1=\"100\" y1=\"100\" x2=\"250\" y2=\"75\" style=\"stroke: blue; stroke-width: 1\" /\u003e\n    \u003cline x1=\"250\" y1=\"75\" x2=\"300\" y2=\"100\" style=\"stroke: blue; stroke-width: 2\" /\u003e\n    \u003ccircle cx=\"200\" cy=\"200\" r=\"50\" stroke=\"green\" stroke-width=\"2\" fill=\"red\" style=\"stroke: green; stroke-width: 1; fill: red \" /\u003e\n  \u003c/svg\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2.1.3 WebGL\n\nWebGL（Web Graphics Library）是一种 3D 绘图协议，其可以为 HTML5 Canvas 提供硬件3D加速渲染，Web开发人员可以借助系统显卡在浏览器里更流畅地展示 3D 场景和模型，还能创建复杂的导航和数据视觉化。\n\n#### 2.1.3.1 基础示例\n\n绘制点（WebGL为进阶内容，了解即可）\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003ewebgl-基础案例\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ccanvas id=\"canvas\" width=\"200px\" height=\"200px\"\u003e\u003c/canvas\u003e\n    \u003cscript\u003e\n      window.onload = function () {\n        //顶点着色器程序\n        var VSHADER_SOURCE =\n          \"void main() {\" +\n          //设置坐标\n          \"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \" +\n          //设置尺寸\n          \"gl_PointSize = 10.0; \" +\n          \"} \";\n\n        //片元着色器\n        var FSHADER_SOURCE =\n          \"void main() {\" +\n          //设置颜色\n          \"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\" +\n          \"}\";\n        //获取canvas元素\n        var canvas = document.getElementById(\"canvas\");\n        //获取绘制二维上下文\n        var gl = canvas.getContext(\"webgl\");\n        if (!gl) {\n          console.log(\"Failed\");\n          return;\n        }\n        //编译着色器\n        var vertShader = gl.createShader(gl.VERTEX_SHADER);\n        gl.shaderSource(vertShader, VSHADER_SOURCE);\n        gl.compileShader(vertShader);\n\n        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);\n        gl.shaderSource(fragShader, FSHADER_SOURCE);\n        gl.compileShader(fragShader);\n        //合并程序\n        var shaderProgram = gl.createProgram();\n        gl.attachShader(shaderProgram, vertShader);\n        gl.attachShader(shaderProgram, fragShader);\n        gl.linkProgram(shaderProgram);\n        gl.useProgram(shaderProgram);\n\n        //绘制一个点\n        gl.drawArrays(gl.POINTS, 0, 1);\n      };\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 2.2 绘图库\n\n### 2.2.1 ECharts*\n\n[ECharts](https://echarts.apache.org/zh/index.html) 是一个基于 JavaScript 的开源可视化图表库（相对较为广泛使用的图表库）。更多内容详见[【专题篇】数据可视化化之ECharts篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-echarts)。\n\n#### 2.2.2.1 绘图步骤\n\n1. 引入 js 库\n2. 编写渲染容器 DOM，添加 width 和 height 样式属性\n3. 获取渲染 DOM 对象\n4. 初始化 ECharts 对象\n5. 编写 option 参数\n6. 调用 setOption 完成渲染\n\n#### 2.2.2.2 基础示例\n\n柱状图\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eECharts-柱状图\u003c/title\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- step1. 编写渲染容器 DOM，添加 width 和 height 样式属性 --\u003e\n  \u003cdiv id=\"chart\" style=\"width: 800px;height: 400px;\"\u003e\u003c/div\u003e\n  \u003cscript\u003e\n    // step2. 获取渲染 DOM 对象\n    const chartDom = document.getElementById('chart')\n    // step3. 初始化 ECharts 对象\n    const chart = echarts.init(chartDom)\n    // step4. 编写 option 参数\n    const option = {\n        title: {\n          text: '快速入门ECharts开发'\n        },\n        xAxis: {\n          data: ['食品', '数码', '服饰', '箱包']\n        },\n        yAxis: {},\n        series: {\n          type: 'bar',\n          data: [100, 120, 90, 150]\n        }\n      }\n    // step5. 调用 setOption 完成渲染\n    chart.setOption(option)\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2.2.2 AntV*\n\n[AntV](https://antv.gitee.io/zh/) 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。\n\n#### 2.2.2.1 G2\n\n1. 编写渲染容器 DOM\n2. 准备渲染数据\n3. 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息\n4. 载入图表数据源\n5. 使用图形语法进行图表的绘制\n6. 调用 render 完成渲染\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eG2-基础案例\u003c/title\u003e\n    \u003cscript src=\"https://gw.alipayobjects.com/os/lib/antv/g2/4.1.32/dist/g2.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!--step1. 编写渲染容器 DOM--\u003e\n    \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      // step2. 准备渲染数据\n      const data = [\n        { year: \"1951 年\", sales: 38 },\n        { year: \"1952 年\", sales: 52 },\n        { year: \"1956 年\", sales: 61 },\n        { year: \"1957 年\", sales: 145 },\n        { year: \"1958 年\", sales: 48 },\n        { year: \"1959 年\", sales: 38 },\n        { year: \"1960 年\", sales: 38 },\n        { year: \"1962 年\", sales: 38 },\n      ];\n      // step3. 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息\n      const chart = new G2.Chart({\n        container: \"container\",\n        autoFit: true,\n        height: 500,\n      });\n      // step4. 载入图表数据源\n      chart.data(data);\n      // step5. 使用图形语法进行图表的绘制\n      chart.scale(\"sales\", { nice: true });\n      chart.tooltip({ showMarkers: false });\n      chart.interaction(\"active-region\");\n      chart.interval().position(\"year*sales\");\n      // step6. 调用 render 完成渲染\n      chart.render();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### 2.2.2.2 G6\n\n1. 编写渲染容器 DOM\n2. 准备渲染数据\n3. 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高等信息\n4. 配置数据源\n5. 调用 render 完成渲染\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eG6-基础案例\u003c/title\u003e\n    \u003cscript src=\"https://gw.alipayobjects.com/os/lib/antv/g6/4.6.4/dist/g6.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!--step1. 编写渲染容器 DOM--\u003e\n    \u003cdiv id=\"mountNode\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      // step2. 准备渲染数据\n      const data = {\n        // 点集\n        nodes: [\n          {\n            id: \"node1\", // String，该节点存在则必须，节点的唯一标识\n            x: 100, // Number，可选，节点位置的 x 值\n            y: 200, // Number，可选，节点位置的 y 值\n          },\n          {\n            id: \"node2\", // String，该节点存在则必须，节点的唯一标识\n            x: 300, // Number，可选，节点位置的 x 值\n            y: 200, // Number，可选，节点位置的 y 值\n          },\n        ],\n        // 边集\n        edges: [\n          {\n            source: \"node1\", // String，必须，起始点 id\n            target: \"node2\", // String，必须，目标点 id\n          },\n        ],\n      };\n      // step3. 创建关系图对象，指定图表所在的容器 id、图表的宽高等信息\n      const graph = new G6.Graph({\n        container: \"mountNode\", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身\n        width: 800, // Number，必须，图的宽度\n        height: 500, // Number，必须，图的高度\n      });\n      // step4. 配置数据源\n      graph.data(data);\n      // step5. 调用 render 完成渲染\n      graph.render();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### 2.2.2.3 L7\n\n1. 编写渲染容器 DOM\n2. 初始化地图对象 L7.Scene\n3. 请求数据\n4. 初始化绘图对象并配置相关属性\n5. 调用 L7.Scene.addLayer 方法绘图\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eL7-基础案例\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/@antv/l7\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!--step1. 编写渲染容器 DOM--\u003e\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      // step2. 初始化地图对象 L7.Scene\n      const scene = new L7.Scene({\n        id: \"map\",\n        map: new L7.GaodeMap({\n          style: \"dark\", // 样式URL\n          center: [120.19382669582967, 30.258134],\n          pitch: 0,\n          zoom: 4,\n        }),\n      });\n\n      // step3. 请求数据\n      fetch(\n        \"https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json\"\n      )\n        .then((res) =\u003e res.json())\n        .then((data) =\u003e {\n          // step4. 初始化绘图对象并配置相关属性\n          const pointLayer = new L7.PointLayer({})\n            .source(data.list, {\n              parser: {\n                type: \"json\",\n                x: \"j\",\n                y: \"w\",\n              },\n            })\n            .shape(\"cylinder\")\n            .size(\"t\", function (level) {\n              return [1, 2, level * 2 + 20];\n            })\n            .color(\"t\", [\n              \"#094D4A\",\n              \"#146968\",\n              \"#1D7F7E\",\n              \"#289899\",\n              \"#34B6B7\",\n              \"#4AC5AF\",\n              \"#5FD3A6\",\n              \"#7BE39E\",\n              \"#A1EDB8\",\n              \"#CEF8D6\",\n            ])\n            .style({\n              opacity: 1.0,\n            });\n          // step5. 调用 L7.Scene.addLayer 方法绘图\n          scene.addLayer(pointLayer);\n        });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2.2.3 Highcharts\n\n[Highcharts](https://www.highcharts.com.cn/) 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 系列包含 Highcharts JS，Highstock JS，Highmaps JS，High 等内容，均为纯 JavaScript 编写的 HTML5 图表库。\n\n#### 2.2.3.1 Highcharts\n\nHighcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。\n\n#### 2.2.3.2 Highstock\n\nHighstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。\n\n#### 2.2.3.3 Highmaps\n\nHighmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。\n\n### 2.2.4 three.js\n\n[Three.js](https://threejs.org) 是一个基于 WebGL 的 Javascript 3D 图形库。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003ethreejs-旋转正方体\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\u003e\n      var camera, scene, renderer;\n      var geometry, material, mesh;\n\n      init();\n      animate();\n\n      function init() {\n        camera = new THREE.PerspectiveCamera(\n          70,\n          window.innerWidth / window.innerHeight,\n          0.01,\n          10\n        );\n        camera.position.z = 1;\n        scene = new THREE.Scene();\n        geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);\n        material = new THREE.MeshNormalMaterial();\n        mesh = new THREE.Mesh(geometry, material);\n        scene.add(mesh);\n        renderer = new THREE.WebGLRenderer({ antialias: true });\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        document.body.appendChild(renderer.domElement);\n      }\n\n      function animate() {\n        requestAnimationFrame(animate);\n        mesh.rotation.x += 0.01;\n        mesh.rotation.y += 0.02;\n        renderer.render(scene, camera);\n      }\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2.2.5 D3.js\n\n[D3](https://d3js.org/)（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003ed3-数据绑定\u003c/title\u003e\n    \u003cscript src=\"https://d3js.org/d3.v7.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cp\u003eVue\u003c/p\u003e\n    \u003cp\u003eReact\u003c/p\u003e\n    \u003cp\u003eAngular\u003c/p\u003e\n    \u003cbutton id=\"datum\"\u003edatum\u003c/button\u003e\n    \u003cbutton id=\"data\"\u003edata\u003c/button\u003e\n    \u003cscript\u003e\n      const body = d3.select(\"body\"); // 这不是dom，这是d3相关的对象\n      const p = body.selectAll(\"p\");\n      const doDatum = () =\u003e {\n        const str = \"Framework\";\n        p.datum(str);\n        p.text((d, i) =\u003e {\n          return `${d}-${i}`;\n        });\n      };\n      const doData = () =\u003e {\n        const dataset = [\"vue\", \"react\", \"angular\"];\n        p.data(dataset).text((d, i) =\u003e {\n          return `${d}-${i}`;\n        });\n      };\n      document.getElementById(\"datum\").addEventListener(\"click\", (e) =\u003e {\n        doDatum();\n      });\n      document.getElementById(\"data\").addEventListener(\"click\", (e) =\u003e {\n        doData();\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# 3. 扩展内容\n\n## 3.1 地图组件\n\n简单来说地图组件就是底图+可视化图层（点线面等），更多内容详见[【专题篇】数据可视化化之地图篇](https://www.yuque.com/sherwin-sw/fe/data-visualization-map)，其主要介绍了百度地图和高德地图的基础使用。\n\n------\n\n如果发现本项目有错误，欢迎提交 issues 指正，也可联系邮箱 [sherwin_sw@163.com](mailto:sherwin_sw@163.com)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherwinshen%2Fdata-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsherwinshen%2Fdata-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherwinshen%2Fdata-visualization/lists"}