手把手带你上手D3.js数据可视化系列（三）- 古柳

> 这是我参与8月更文挑战的第3天，活动详情查看： [[8月更文挑战]](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831") 本系列 D3.js 数据可视化文章是古柳按照自己想写的逻辑来写的，可能和网上的教程都不太一样，至于会写多少篇、写成什么样，古柳也完全心里没数，虽然是奔着初学者也能轻松看懂的目标去的，但真的`大家看完觉得有什么感受，古柳也不清楚，所以希望大家多多反馈，后续文章能改进的也继续改进，并且有机会的话基于这个系列再出个视频教程，但那是后话了`。配套代码和用到的数据都会开源到这个仓库，欢迎大家 Star，其他有任何问题可以群里交流：[https://github.com/DesertsX/d3-tutorial](https://github.com/DesertsX/d3-tutorial) ## 前言前两篇文章[「手把手带你上手D3.js数据可视化系列（一） - 牛衣古柳 - 2021.07.30」](https://juejin.cn/post/6990890850700148766)、[「手把手带你上手D3.js数据可视化系列（二） - 牛衣古柳 - 2021.08.10」](https://juejin.cn/post/6994970440573648910)主要为了带大家熟悉 `D3.js` 绘制 `SVG` 元素等操作，所以其他地方怎么简单怎么来，比如数据拿直接生成的自然数数组已经够用，就避免引入更多概念，不在新手教程里一次性灌输太多内容，而是尽量拆分知识点。 ```js const dataset = d3.range(30) ``` 现在大家对在画布上绘制元素应该不陌生了，那么古柳就继续讲解下如何读取真实数据集、对数据进行相应处理、基于数据绘制元素、将类别属性映射成对应颜色，以及比例尺的使用、文本元素绘制、图例的实现等相关内容。当然一切还是在前两篇文章的基础上进行，所以这回依旧用矩形作为主要的视觉元素。一开始古柳的设想是最好数据里有类别型属性，这样方便讲解颜色比例尺以及实现关于各类别数量的图例等内容，也方便为后续文章做好铺垫。原本想用书籍（或电影）这类数据集，这样年末大家整理看过的书单（如果大家真的看了很多书的话，doge）时或许就能参照本文代码，以可视化的方式清晰明了地展示看过的书都是什么类型的。但古柳也没想到合适的书籍数据集，后来想到2020年度b站百大Up主的数据还行，可以拿来看看他们都是什么分区的。当然本文就不涉及获取数据步骤，一讲解就会很冗长，后续会写个番外篇进行介绍。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8fedd453f3cc4e9abbdf47d138a80e8c~tplv-k3u1fbpfcp-watermark.image) 这里只需知道分区数据是从Up主个人主页“投稿”栏下的“视频”处获取的，并且简单地以数量最多的区作为Up主所属分区，不一定很准确，仅作为教程里演示的例子而已。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70a01cd5de8b41148451338befd90142~tplv-k3u1fbpfcp-watermark.image) 这里先看下最终效果图， ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac5af213783c4fe7bd10d87c5abc6727~tplv-k3u1fbpfcp-watermark.image) ## 基础代码这次的样式和前两篇的略有不同，主要是居中放置 `div#chart` 元素，并且后续 `SVG` 画布采取固定宽高方式设置。不过这些都不是很关键，看自己需求怎么设置都行。 ```html 手把手带你上手D3.js数据可视化系列（三）- 古柳

``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8676c4b02d8e411ab013962761ac8b62~tplv-k3u1fbpfcp-watermark.image) ## 读取数据很多时候，可视化用到的数据存储在 `CSV` 或 `JSON` 文件里，这时直接用 `d3.csv()` 或 `d3.json()` 读取数据即可。不过由于读取数据是异步操作，需要加上 `await` 关键词以确保读取到数据后再去执行后续代码，同时函数外也需配套地加上 `async` 关键词，这里就不讲解异步操作与同步操作、宏任务与微任务等概念了，大家可自行了解。 ```js async function drawChart() { let dataset = await d3.json('2020_bilibili_upzhu.json') console.log(dataset[0]) console.table(dataset) } drawChart() ``` 大家只需知道以后网上看到类似下面读取数据的操作，都能改成上面 `async await` 的方式即可，写起来也更舒服。 ```js d3.csv("data.csv", function (error, dataset) { console.log(dataset) }); d3.json('data.json').then(dataset => { console.log(dataset[0]) console.table(dataset) }) ``` ## 数据格式这里介绍下数据格式，`json` 文件里是100个up主的相关数据，本文暂时只用到昵称 `name` 和分区数据 `tlist`，并且数据处理后会新增两个属性 `field` 和 `fieldId`，以便后续使用。 ```js [ { name: "老师好我叫何同学", uid: "163637592", tlist: [ { tid: 160, count: 4, name: "生活" }, { tid: 188, count: 32, name: "科技" }, { tid: 217, count: 1, name: "动物圈" }, { tid: 36, count: 5, name: "知识" }, ], likes: 28123374, view: 216333794, desc: "把600万粉丝ID放进一张合照、用一万行备忘录做一只奔跑的小猫——他是放假会做贼有意思视频的何同学。他对过去和未来保持着同样的好奇心，天马行空的想法打磨成干净利落的投稿。做何同学的粉丝，关注技术进步的同时，更会关心到被数码影响的人类生活本身。", face: "http://i0.hdslb.com/bfs/activity-plat/static/af656f929a9b11da0afaad548cc50dcf/F8frVz9MD.jpg", // field: "科技", // fieldId: 10, }, ] ``` ## 数据处理 `field`，即Up主所属分区，是将分区数组基于 count 数量降序排序后，取排第一的分区名称得到的，具体处理过程如下。 ```js dataset.forEach(d => { if (d.tlist !== 0) { d.tlist.sort((a, b) => b.count - a.count) } else { // 机智的党妹 uid: '466272' tlist: 0 d.tlist = [{ tid: 129, count: 100, name: "时尚" }] } d.field = d.tlist[0].name }) ``` 由于百大Up里有几个已经翻车凉凉了，所以需要特殊处理下，比如“`机智的党妹`”删除了所有视频，无从知晓分区数据，且古柳爬取数据时将其 tlist 设置成为 0，所以这里筛选出来后，重新手动设置成“时尚”区，而 count 数量无关紧要，就设置成了100，tid 是b站官方的，参考其他有时尚区的up主数据，copy 过来即可，并且统一以数组格式保存，方便统一用索引取排第一的分区。而其他凉凉的up主数据都还正常，这里就不用额外处理。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65e2869f209f410fb5dbb5b82554c76e~tplv-k3u1fbpfcp-watermark.image) 有了所有up主的分区数据，接下来统计下各分区的数量。 ```js let fieldCount = {} const fields = dataset.map(d => d.field) fields.forEach(d => { if (d in fieldCount) { fieldCount[d]++ } else { fieldCount[d] = 1 } }) // console.log(fieldCount) ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b7d7af0f21b4ada91cd0938b1f38629~tplv-k3u1fbpfcp-watermark.image) 将统计结果的对象格式通过 `Object.entries()` 转化成数组格式，其中每一项元素也是数组格式，这里按照分区数量倒叙排序处理，`fieldCountArray` 后面也会用到绘制图例/legend上。 ```js let fieldCountArray = Object.entries(fieldCount) fieldCountArray.sort((a, b) => b[1] - a[1]) // console.log(fieldCountArray) // fieldCountArray [ ["游戏", 20], ["生活", 15], ["美食", 11], ["知识", 11], ["动画", 8], ["时尚", 7], ["音乐", 6], ["鬼畜", 5], ["影视", 5], ["舞蹈", 4], ["科技", 4], ["动物圈", 2], ["国创", 1], ["汽车", 1] ] ``` 最后基于up主的分区属性 `field`，将其在 `fieldCountArray` 中的索引作为 `fieldId` 设置到原始数据集上，这样就能对数据集也按照分区数量降序排序，否则因为本次分区较多、后面颜色也多，如果随机排列，会过于花哨不好识别。 ```js dataset.map(d => d.fieldId = fieldCountArray.findIndex(f => f[0] === d.field)) dataset.sort((a, b) => a.fieldId - b.fieldId) ``` 以上就是数据处理相关操作，知道需要什么，然后处理出对应格式数据，至于中间过程、代码如何写可能每个人有自己的实现方式，这些都问题不大。 ## 画布设置本次画布的宽高固定，这没什么好说的，基于实际需要什么设置画布都行。有一点不同的是，这次还设置了 `margin`，一般用来给绘图区域的上下左右留出相应空间，比如一般左侧有y轴，下方有x轴，这时候就需要给坐标轴、刻度、标签等留出空间，就会相应将 `left` 和 `bottom` 设置大些。 ```js const width = 1400 const height = 700 const margin = { top: 100, right: 320, left: 30 } const svg = d3.select('#chart') .append('svg') .attr('width', width) .attr('height', height) .style('background', '#FEF5E5') const bounds = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) ``` 而本次上方留空间给标题，右侧留空间画图例，所以 `top` 和 `right` 会大些，而左侧为避免太贴边也空了些区域。在添加完 `SVG` 画布后，通过给 `SVG` 添加一个 `g` 元素，即 `group`，然后将其水平向右和垂直向下平移相应像素，这样后续在 `g` 里绘制的元素其坐标原点就是在图中框选区域的左上角开始，而不是画布的左上角开始。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b742113f8afb4de1a201ca558875b28a~tplv-k3u1fbpfcp-watermark.image) `g` 元素可能就是设计师嘴里的“打个组”，实际并不会在页面里渲染出内容，但方便对网页不同区域“打组“进行区分，也方便把一个组内的元素统一平移等操作，是非常有用的元素，后续也会频繁使用。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b4e1c31463d4ecfad0cec7d97131c65~tplv-k3u1fbpfcp-watermark.image) ## 颜色数据颜色数组会和 `fieldCountArray` 里统计的分区一一对应，一开始用的其他配色，听不少人反馈颜色不好看后，改成了这个配色，具体会在番外篇里提到。 ```js const colors = [ '#5DCD51', '#51CD82', '#51CDC0', '#519BCD', '#515DCD', '#8251CD', '#CD519B', '#CD519B', '#CD515D', '#CD8251', '#CDC051', '#B6DA81', '#D2E8B0', '#A481DA' ] ``` ## 添加标题 `SVG` 里的文字需要通过添加 `text` 元素来实现，标题也是。这里把标题放置在上方靠左的位置，`x/y` 坐标很好理解；`.text()` 里是具体文字内容；字体相关 `CSS` 样式，如字体大小和权重等需要通过 `.style()` 进行设置。 ```js const title = svg.append('text') .attr('x', margin.left) .attr('y', margin.top / 2) .attr('dominant-baseline', 'middle') .text('2020年度B站百大Up主分区情况') .style('font-size', '32px') .style('font-weight', 600) ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2c28e3500314865b66bb23031cf0ca8~tplv-k3u1fbpfcp-watermark.image) 值得注意的是，需要设置 `dominant-baseline: middle` 将文字水平中轴和 `x/y` 坐标点对齐。这个属性古柳也是最近看 `Fullstack D3` 才知道的，现学现用，其他设置的效果如图。同样的垂直中轴对齐坐标点可以通过设置 `text-anchor: middle`，这个应该用的更频繁，下面就会用上。链接：[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline) ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41a293f8405e449da846a17704aa72c6~tplv-k3u1fbpfcp-watermark.image) ## 绘制可视化主体图接下来是前两篇里也多次提到的基于数据绘制元素的操作，想来大家应该很熟悉了。这里矩形宽度 `rectWidth` 为50px，高度 `rectHeight` 为80px，矩形上下左右间距为10px，每行最多17个矩形；通过取余取整操作指定每个矩形的坐标就能布局好。注意这里是在已经水平垂直整体平移过的 `bounds` 元素里添加而不是在 `svg` 里添加；并且先添加了一个组 `g`，以便和其他区域区分开。假如都是直接在 `bounds` 里添加矩形，因为后续图例里也有矩形，那时候 `bounds.selectAll('rect')` 选中矩形时可能就会把这里的矩形给选中，就需要再通过设置 `class` 样式名进行避免。下面添加图例时会演示，但总之多“打个组”并不坏处。 ```js const rectTotalWidth = 60 const rectTotalHeight = 90 const rectPadding = 10 const rectWidth = rectTotalWidth - rectPadding const rectHeight = rectTotalHeight - rectPadding const columnNum = 17 const rectsGroup = bounds.append('g') const rects = rectsGroup.selectAll('rect') .data(dataset) .join('rect') .attr('x', (d, i) => i % columnNum * rectTotalWidth) .attr('y', (d, i) => Math.floor(i / columnNum) * rectTotalHeight) .attr('width', rectWidth) .attr('height', rectHeight) .attr("fill", d => colors[fieldCountArray.findIndex(item => item[0] === d.field)]) ``` 另外 `fill` 填充矩形颜色时需要根据每个up主的 `field` 分区数据从 `fieldCountArray` 里找到索引值，然后从颜色数组 `colors` 里取出同一位置相对应的颜色即可，主要是 JS 的写法新手不够熟悉的话可能会不好实现。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb27390fb29648e79b5523b7826b6fee~tplv-k3u1fbpfcp-watermark.image) ## 绑定的数据可以多种格式这里古柳觉得可能需要单独再讲下，绑定到元素或者说是 `D3` 选择集 `selection` 上的数组数据可以是多种格式的，只需要记得 `.attr()` 里设置属性或 `.style()` 里设置样式，如果是固定值直接写上即可；如果和数据有关，则通过回调函数指定，其中函数参数 `(d, i)` 分别是数组里每项元素和元素索引即可。 ```js .selectAll('rect') .data(dataset) .attr('x', (d, i) => d * 10) ``` 比如数组里每一项是数字的，d 就是数字；数组是嵌套数组，每一项元素也是数组的 d 就是数组；数组里都是对象的，d 就是对象...然后具体回调函数里进行设置时相应从 d 里取数据即可。 ```js dataset => [0, 1, 2, 3] => d 就是数字 dataset => [['游戏', 21], ['', 10], ['', ]] => d 就是子数组 dataset => [{ name: '', field: '' }, { name: '', field: '' }, { name: '', field: '' }] => d 就是对象 ``` ## 显示up主名字接着在每个矩形的中心位置添加上up主名字，`text-anchor` 和 `dominant-baseline` 都设置成 `middle`，这样文字才能居中显示。当然这里的效果不够好，存在文字重叠的问题，因为只是教程里的小例子，只为了粗略地看下都是那些up主，所以就不过多优化了。 ```js const texts = rectsGroup.selectAll('text') .data(dataset) .join('text') .attr('x', (d, i) => rectWidth / 2 + i % columnNum * rectTotalWidth) .attr('y', (d, i) => rectHeight / 2 + Math.floor(i / columnNum) * rectTotalHeight) .text(d => d.name) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', '#000') .style('font-size', '9.5px') .style('font-weight', 400) // .style('writing-mode', 'vertical-rl') ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc7095afce6148ca85f5ba42385cdaa5~tplv-k3u1fbpfcp-watermark.image) ## 添加图例接下来在画布右侧绘制图例，以展示各分区的百大up数量。原本右侧预留了320px大小，但因为左侧主图的右侧还有些空间，所以给图例添加 `g` 元素时水平向左平移到合适位置，具体可以在后续绘制出来后进行调节就好懂了。 ```js const legendPadding = 30 const legendGroup = bounds.append('g') .attr('class', 'legend') .attr('transform', `translate(${width - margin.right - legendPadding}, 0)`) ``` 同样右侧图例里的矩形左右两侧也预留 `legendPadding` 空间用于添加分区文字和对应数字。为了将分区数值大小映射成右侧区域宽度的像素值，需要用到 `D3.js` 里很有用的比例尺，其实本质就是个函数，线性比例尺就是线性函数，通过 `.domain()` 设置数据里的最小值和最大值，最小值这里设成0，最大值通过 `d3.max()` 从嵌套数组 `fieldCountArray` 里指定元素第二个属性，也就是分区统计数值自动计算得出，再通过 `.range()` 设置画布上区域的像素值大小，最小值同样为0，最大值为右侧空白减去预留的两侧 `legendPadding` 大小的数值。注意这里都是以数组的格式传入。(比例尺这里可能还讲的不够清楚，后续文章会再做讲解) ```js const legendWidthScale = d3.scaleLinear() .domain([0, d3.max(fieldCountArray, d => d[1])]) .range([0, margin.right - legendPadding * 2]) ``` 接着为了使图例的整体高度和左侧主图一致，计算出左侧的高度 `legendTotalHeight`，其实共6行，通过 `rectTotalHeight` 和 `rectPadding` 很好计算，这里写的复杂些，但知道在做什么即可；然后 `legendBarTotalHeight` 就等于图例矩形高度 `legendBarHeight` 加上下间距的 `legendBarPadding`。 ```js const legendBarPadding = 3 const legendTotalHeight = (Math.floor(dataset.length / columnNum) + 1) * rectTotalHeight - rectPadding const legendBarTotalHeight = legendTotalHeight / fieldCountArray.length const legendBarHeight = legendBarTotalHeight - legendBarPadding * 2 ``` 最后分别绘制图例的矩形、分区名称、对应数值即可。`.selectAll()` 里均带上了 `class` 进行选中元素，尤其文字有两组，所以必须加上，简写成 `.selectAll('.legend-label')` 也行，但后面必须有这两句设置 `.join('text').attr('class', 'legend-label')`。另外上面也说了比例尺其实就是个函数，所以直接设置矩形宽度时，直接调用 `legendWidthScale()` 并传入数据集里每项的分区数值即可。其他属性大多此前讲过了，只需多注意到底要放在什么位置即可。 ```js const legendBar = legendGroup.selectAll('rect.legend-bar') .data(fieldCountArray) .join('rect') .attr('class', 'legend-bar') .attr('x', 30) .attr('y', (d, i) => legendBarPadding + legendBarTotalHeight * i) .attr('width', d => legendWidthScale(d[1])) .attr('height', legendBarHeight) .attr('fill', (d, i) => colors[i]) const legendLabel = legendGroup.selectAll('text.legend-label') .data(fieldCountArray) .join('text') .attr('class', 'legend-label') .attr('x', 30 - 10) .attr('y', (d, i) => legendBarTotalHeight * i + legendBarTotalHeight / 2) .style('text-anchor', 'end') .attr('dominant-baseline', 'middle') .text(d => d[0]) .style('font-size', '14px') const legendNumber = legendGroup.selectAll('text.legend-number') .data(fieldCountArray) .join('text') .attr('class', 'legend-number') .attr('x', d => 35 + legendWidthScale(d[1])) .attr('y', (d, i) => legendBarTotalHeight * i + legendBarTotalHeight / 2) .attr('dominant-baseline', 'middle') .text(d => d[1]) .style('font-size', 14) .attr('fill', '#000') ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba28b90978774e5a834a562c37ac4cd2~tplv-k3u1fbpfcp-watermark.image) ## 小结本文古柳带大家用真实数据集绘制了一个可视化图，借此也讲解了更多 `D3.js` 的用法。最终效果图可能还有不少问题，比如有群友提到，图例里数值大的可以设成颜色深，小的可以设成颜色浅，这样可能更好。但准备这篇文章已经花了不少时间，想讲的内容都讲到了即可，更进一步的优化就留给大家实现吧。 ## 照例文章更新可能没那么频繁，可视化交流群里倒是每天分享优秀作品或文章，欢迎加入交流。加古柳微信`「xiaoaizhj」`备注`「可视化加群」`即可！对本文任何地方有疑惑的可以群里提问。欢迎关注古柳的公众号`「牛衣古柳」`，并设置星标，以便第一时间收到更新。