d3成神之路（一）：先从柱状图开始

快来打我* 2022-09-09 06:03 123阅读 0赞

上周五我再团队里完成了前端qiankun微服务架构单镜像部署方案的分享，这件事终于告一段落了，这件事本身是一件很有价值的事情，能够较低很大的部署，运维成本。但由于研究期间本职的工作内容排的很满，而且中间又经历了曲折的绩效考核。所以一拖再拖。终于告一断落了。

于是我开始思考，下一阶段研究点什么那？  
除了工作之外的学习内容，我给自己的要求是必须要学点区别于其他人的，着眼于未来的学习内容。在接触了node-red 与 butterfly 之后，我发现它们都使用了d3，大家一致都说d3是一个学习曲线很陡的js库，网上一直有他的传说。  
很多优秀的软件只是用了太它的一点皮毛，就让软件增色很多，比如node-red的节点编排，butterfly的节点排版。所以我决定花点时间，好好学习一下它。

首先我先大致浏览了d3的文档，然后看了b站的使用d3进行数据可视化编程的视频。  
感觉也不是很难吧，相对于echarts具有丰富的案例，d3只是提供很底层的api，想创造什么，看你的创造力了。

如果不知道的怎么学习一样东西时，可以先试着模仿。  
用d3做一些常用的图表，照着echarts的案例做。  
人类最开始的学习就是模仿。  
就像我的女儿学习拍手，走路，吃饭。

学习d3先来个柱状图吧  
照着b站的视频，我也敲出来了这样一个柱状图。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_20_color_FFFFFF_t_70_g_se_x_16]  
很简单的一个柱状图，但用到的知识却很多，坐标系，比例尺，svg操作，一个基础图例用到的都用到了。

下面我来总结一下开发的思路。  
首先定义svg，与源数据  
svg 的容器

使用的源数据

const data = [
       { name: 'a', value: 1},
       { name: 'b', value: 2},
       { name: 'c', value: 3},
       { name: 'd', value: 4},
       { name: 'e', value: 5},
    ]

获取容器和设置容器的margin

const svg = d3.select('#main');
    const width = svg.attr('width');
    const height = svg.attr('height');
    const margin = { top: 60, right:30, bottom: 60,left:50}
    const innerWidth = width - margin.right - margin.left
    const innerHeight = height - margin.top - margin.bottom

然后就是创建x轴的比例尺，和y轴的比例尺

const xScale = d3.scaleLinear()
                     .domain([0, d3.max(data, d => d.value)])
                     .range([0, innerWidth])
    
    const yScale = d3.scaleBand()
                     .domain(data.map(x => x.name))
                     .range([0, innerHeight])
                     .padding(0.5)

注意新的api的使用`d3.scaleLinear()` ，`d3.scaleBand()`， `domain()`， `range()` , `padding()`。我们一个一个学习一下。

`d3.scaleLinear()` 创建一个连续线性的比例尺，就是连续数字的映射。。简单地说,比例尺就相当于是一个函数,让我们把一组定义域映射到值域。  
后面的domain()和range(),两个函数都是又来修饰 该比例尺的。常见的使用场景时这样的， svg 长 1200px，我们可以将  
0到1200 映射成 0到原数据的最大值。这样，原数据中的任意一个值都可以使用该比例尺找到自己的位置。所以 domain()函数是用来设置定义域，range()是用来设置值域的。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_11_color_FFFFFF_t_70_g_se_x_16]  
domain的参数取自 数据集中， range的参数取自容器 svg的长宽。

scaleBand() 创建一个序列的条状比例比例尺，它的定义域是一个类目的集合，如，`['苹果','橘子','梨','香蕉','火龙果','西瓜']`  
在这里 定义域就是 `domain(data.map(x => x.name))` 元数据名称的集合。

设置完比例尺 就要设置 坐标轴 和渲染数据了

const g = svg.append('g').attr('id', 'maingroup').attr('transform',`translate(${ margin.left},${ margin.top})`)
    const yAxis = d3.axisLeft(yScale)
    g.append('g').call(yAxis)
    
    const xAxis = d3.axisBottom(xScale)
    g.append('g').call(xAxis).attr('transform', `translate(0, ${ innerHeight})`)
    
    data.forEach(d => { 
        g.append('rect')
        .attr('width', xScale(d.value))
        .attr('height', yScale.bandwidth())
        .attr('fill', 'green')
        .attr('y', yScale(d.name))
    })

代码解释，待续。。。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/74e4e35a86e140618bb1cafd5be2d7b8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/688bf092fb874b69983f29eedb5b91ee.png