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

前言

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

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

正好古柳以前啃大西洋手抄本可视化做品源码时看到了相关实现方法，这里就和你们分享下。相关阅读：迄今复现过最复杂的可视化做品之「大西洋古抄本」(上) - 牛衣古柳 2021.06.17、迄今复现过最复杂的可视化做品之「大西洋古抄本」(下) - 牛衣古柳 2021.06.22vue

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

基础代码

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

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

<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/getBoundingClientRectmarkdown

const containerWidth = width
const containerHeight = height
const containerArea = containerWidth * containerHeight
复制代码

空白间距

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

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 数据可视化的讲解上。

另外，若是有人能搞懂上述源码里的方法、或者有什么其余方法，也欢迎告诉古柳、群里交流。

照例

若是欢迎来「可视化交流群」一块儿交流，加古柳微信「xiaoaizhj」备注「可视化加群」拉你进群哈！

欢迎关注古柳的公众号「牛衣古柳」，并设置星标，以便第一时间收到更新。

相关阅读：安利一些不错的D3.js数据可视化资源