手把手带你上手D3.js数据可视化系列（二）手把手带你上手D3.js数据可视化系列（二）

古柳_DesertsX

发布于 2021-12-08 17:27:26

3.1K0

发布于 2021-12-08 17:27:26

文章被收录于专栏：Data Analysis & Viz

本系列配套代码和用到的数据都会开源到这个仓库，欢迎大家 Star，https://github.com/DesertsX/d3-tutorial

前言

上一篇文章「手把手带你上手D3.js数据可视化系列（一） - 牛衣古柳 2021.07.30」里古柳介绍了如何添加并设置 SVG 画布、添加矩形元素、根据数据集来添加多个矩形元素、运用取余取整操作调整布局并换行显示等内容。

文章最后留下一个疑问，就是能否基于数据集大小和画布大小来自动计算出每个rect的宽高和间距，然后自动布局？

正好古柳之前啃大西洋手抄本可视化作品源码时看到了相关实现方法，这里就和大家分享下。

不过古柳也没有吃透背后的原理，只能尽量写下自己的理解，而且一来大家不一定会用到这个自动布局的方法，二来真要用到直接 copy 拿走也不是不可以，所以如果这部分最终也没搞懂其实问题不大，对后续没啥影响，放心。下一篇会回到基础的 D3.js 数据可视化的讲解上。

基础代码

首先基本代码结构和上一篇文章类似，有不懂的地方可以回顾下：「手把手带你上手D3.js数据可视化系列（一） - 牛衣古柳 2021.07.30」。

这次 SVG 画布撑满网页窗口大小，宽度不再是一半大小；并且 dataset 数据集设置大些，即 [0, 1, 2, ..., 99] 共100条数据，不过后面会自动基于数据量大小计算布局，所以数据多少并不重要；另外 colors 颜色数组不变，绘制矩形时仍会通过取余数的方式来取对应颜色，以后也会介绍颜色比例尺，将类别属性进行映射到对应颜色，到时候再说。

<body>
    <div id="chart"></div>
    <script src="./d3.js"></script>
    <script>
        function drawChart() {
            const width = window.innerWidth
            const height = window.innerHeight

            const svg = d3.select('#chart')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
                .style('background', '#FEF5E5')

            const dataset = d3.range(100)
            console.log(dataset) // [0, 1, 2, ..., 99]

            const colors = ['#00AEA6', '#DB0047', '#F28F00', '#EB5C36', '#242959', '#2965A7']

            // ....
        }

        drawChart()
    </script>
</body>

自动布局之计算矩形宽度

画布设置好后，先来整体看看大西洋手抄本可视化作品源码里是如何根据画布大小和数据多少计算每个矩形的宽度 rectWidth 的，由于矩形高度均是宽度的1.5倍，所以无需另外计算。(注意：这部分代码并非完全和源码里一致，很多变量名等都为了讲解方便重新改了下，但逻辑一致、计算流程相同)

const containerWidth = width
const containerHeight = height
const containerArea = containerWidth * containerHeight

const halfMargin = (containerWidth / 100) * 0.3
const totalMargin = halfMargin * 2

let rectWidth = Math.sqrt(containerArea / (1.5 * dataset.length)) - totalMargin

const columns = containerWidth / (rectWidth + totalMargin)
const rows = dataset.length / columns
const rest = dataset.length % parseInt(columns)

if (rest <= rows) {
    rectWidth = containerWidth / (columns + 1) - totalMargin
} else if (rest > rows) {
    rectWidth = containerWidth / (columns + 2) - totalMargin
}

接下来拆解代码，看看都做了哪些事。

画布容器面积

首先，计算出画布容器的面积 containerArea。这里 containerWidth 和 containerHeight 分别对应 width 和 height，似乎多此一举。但有时候画布宽高并不是手动设置的，而是通过 getBoundingClientRect() 获取元素的宽高后进行指定，类似这样的方式 containerWidth = svg.getBoundingClientRect().width，containerHeight = svg.getBoundingClientRect().height。总之知道这里要先计算出面积即可。

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

const containerWidth = width
const containerHeight = height
const containerArea = containerWidth * containerHeight

空白间距

接着计算出矩形之间的空白间距。这里矩形上下左右一圈的 halfMargin 是通过容器宽度 containerWidth 计算出来的，即 (containerWidth / 100) * 0.3，可见容器宽度越大间距越大，反之亦然；totalMargin 就是左边+右边或者上边+下边的间距，也就是 halfMargin 的2倍。

const halfMargin = (containerWidth / 100) * 0.3
const totalMargin = halfMargin * 2

此时每个矩形包含间距后的整体宽度是 rectWidth + totalMargin，整体高度是 1.5 * rectWidth + totalMargin(上面说过矩形实际高度总是宽度的1.5倍)。

初步算出矩形实际宽度

然后源码里通过下面的公式初步算出矩形实际宽度 rectWidth，可以看出来大概是想通过所有矩形整体面积等于容器面积的方式，但似乎又有点不同。

// 初步计算出矩形实际宽度
let rectWidth = Math.sqrt(containerArea / (1.5 * dataset.length)) - totalMargin

// 变换后
// (rectWidth + totalMargin) * 1.5 * (rectWidth + totalMargin) * dataset.length = containerArea

论理，单个矩形整体面积 = 整体宽度 * 整体宽度 = (rectWidth + totalMargin) * (1.5 * rectWidth + totalMargin)，原始面积公式应该如下，而源码里似乎采用了近似后的计算公式，古柳猜测可能是基于简化计算的原因，否则照原始公式还要解一元二次方程才能算出 rectWidth。而且后面实际绘制矩形时，就会发现确实是矩形实际高度为实际宽度的1.5倍，而不是整体高度为整体宽度的1.5倍，所以可知这里是近似后，应该就是为了简化计算。

// 原始面积计算公式
(rectWidth + totalMargin) * (1.5 * rectWidth + totalMargin) * dataset.length = containerArea

// 近似后直接算出，不用解一元二次方程
(rectWidth + totalMargin) * 1.5 * (rectWidth + totalMargin) * dataset.length = containerArea

矩形最终宽度

上面说初步计算出矩形实际宽度 rectWidth，是因为这里还通过下面的方式，在比较 rows 和 rest 孰大孰小后，算出最终 rectWidth。首先是根据容器宽度除以单个矩形整体宽度得到 columns，由于这里没有向下取整，所以带有小数；接着根据数据多少，算出 rows，同样带有小数；然后根据数据多少和向下取整后的 columns 算出 rest；最后如果 rest <= rest 则列数多加一列，否则多加两列，然后计算出最终矩形宽度 rectWidth。

let rectWidth = Math.sqrt(containerArea / (1.5 * dataset.length)) - totalMargin

const columns = containerWidth / (rectWidth + totalMargin)
const rows = dataset.length / columns
const rest = dataset.length % parseInt(columns)

if (rest <= rows) {
    rectWidth = containerWidth / (columns + 1) - totalMargin
} else if (rest > rows) {
    rectWidth = containerWidth / (columns + 2) - totalMargin
}

其实这步古柳就不懂为何这样算了，虽然可以马后炮地说，这样确实能避免矩形超出画布，而且能尽量占满画布空间，但不确定背后原理。(如果有人看懂了的话可以群里告诉古柳！)

但古柳想到类似上篇文章「手把手带你上手D3.js数据可视化系列（一） - 牛衣古柳 2021.07.30」里调整布局，换行显示的部分，如果这里也分别对宽高进行限制，即每一行的最后一个矩形整体要在画布内，并且每一列的最后一个矩形整体要在画布内，然后列下公式，看看能不能计算出来。不过这里暂时不尝试了，先以介绍大西洋手抄本里的源码为主。

绘制矩形

算出矩形实际宽度 rectWidth 后，高度也就知道了；这里重新设置空白间距 rectTotalMargin，然后得到带间距矩形整体的宽高 rectTotalWidth 和 rectTotalHeight；接着容器宽度除以单个矩形整体宽度，并向下取整，就是每行最后矩形个数 columnNum；最后绘制矩形同样用这三个步骤 svg.selectAll('rect').data(dataset).join('rect')，并且采用取余取整操作，计算出每个矩形的x/y坐标值，和上一票最后调整布局换行显示的都类似，应该无需过多解释了。

const rectHeight = 1.5 * rectWidth
const rectTotalMargin = containerWidth * 0.005
const rectTotalWidth = rectWidth + rectTotalMargin
const rectTotalHeight = rectHeight + rectTotalMargin

const columnNum = Math.floor(containerWidth / rectTotalWidth)

const rects = svg.selectAll('rect')
    .data(dataset)
    .join('rect')
    .attr('x', d => rectTotalMargin + d % columnNum * rectTotalWidth)
    .attr('y', d => rectTotalMargin + Math.floor(d / columnNum) * rectTotalHeight)
    .attr('width', rectWidth)
    .attr('height', rectHeight)
    .attr('fill', d => colors[d % colors.length])

源码里是组件化方式实现

这里可能需要提下，大西洋古抄本源码是用 Vue 框架实现的，可视化部分用的 Vue-Konva。源码里是在父组件里算出矩形实际宽度 rectWidth，也就是下面的 elementWidth后，将数据传递给子组件 PageVizCanvas 然后由该组件完成可视化功能，所以像上面的空白间距又重新设置了一遍等操作，也是子组件里进行的，虽然不确定为什么这里乘以0.005，和前面的又不一致了，但没出啥bug就先随它去吧。

链接：https://cn.vuejs.org/

链接：https://github.com/konvajs/vue-konva

<PageVizCanvas
    :inputData="filteredData"
    :viewPages="viewPages"
    :width="elementWidth"
    :height="1.5 * elementWidth"
    :activePages="activePages"
    :navigateTo="navigateTo"
/>

当然新手对 Vue 框架和组件化开发等不了解，可以暂时忽略。

小结

文章也不短了，作为本系列的第二篇文章，古柳简单分享了下优秀可视化作品源码里涉及的基于数据集大小和画布大小来自动布局的方法。诚然在古柳自己也没完全理解的情况下，就这么写出来似乎并不好，但还是那句话，本系列都是按照古柳自己想写的逻辑来写的，接着上篇文章的顺序，就觉得一切并不突兀、比较顺理成章，那就写写吧，等下一篇会回到基础的 D3.js 数据可视化的讲解上。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/8/21 上，如有侵权请联系 cloudcommunity@tencent.com 删除

数据可视化