vue + d3系列 -- 柱状图

前言

因为我之前用的是echarts来做数据可视化，而且用了相当长一段事件，基本上各种图形都用过，所以对数据可视化的一些基础的东西还有交互还是有一些了解的，所以知道不管是canvas还是svg来做数据可视化大概都是那么些玩意，只是套路有一些差别罢了

接下来我们来做一个柱状图，我们先从比较基础得做起，并加上一些基础的事件交互

柱状图

什么是柱状图

我们来想一下做一个柱状图需要什么东西，由什么组成
x,y轴，一根或多跟柱子 ——>这就是一个简单的柱状图

关于实现细节的问题

• 因为d3画图是把svg当成一个dom元素放到页面上展示，首先就需要有宽高
  如果不了解svg ---- 传送门
• 柱状图是由一个个的柱子组成的那么柱子就要设置宽度，高度肯定是根据数据来的
• x,y取值范围当然不能写死，因为有时候读取的后台数据是不可控的，那么也是我们通过计算得出来的

纠正一个思想误区

关于x,y这里要解释一下，我们看见的常规柱状图是

image.png

但是svg实际绘图得时候x,y是需要处理才能展现出常规的柱状图

举例说明一下，就像一个宽高都是500px的一个div我们在里面添加元素的时候肯定是自左向右，自上往下排的

image.png

svg的x轴y轴是下图这样的，当然最后给我们呈现的常规柱状图，肯定是需要我们通过代码处理的

image.png

实现它

准备工作

      //给一个数据
            const dataArr = [
                {name: 'one', value: 32},
                {name: 'two', value: 36},
                {name: 'three', value: 40},
                {name: 'four', value: 44},
                {name: 'five', value: 48},
                {name: 'six', value: 52},
                {name: 'seven', value: 56},
                {name: 'eight', value: 60},
                {name: 'nine', value: 64},
            ];
            // 处理数据
            const nameArr = dataArr.map((item)=> { return item.name});
            const valueArr = dataArr.map((item)=> { return item.value});
            //指定容器的宽高
            let padding = {top: 20, right: 20, bottom: 20, left: 20},
                width = 500 - padding.right - padding.left,
                height = 500 - padding.bottom - padding.top;

创建x,y轴比例尺

这就是上述的问题x,y不能写死，而且柱子应该按照对应轴的比例缩放

     //x,y轴比例尺
            let xscale = d3.scaleBand().domain(nameArr).rangeRound([0,width]).padding(0.1);
            let yscale = d3.scaleLinear().domain([0,d3.max(valueArr)]).rangeRound([height,0]);

创建svg

//创建svg
            const svg = d3.select('#force').append('svg')
                           .attr('width',width + padding.left + padding.right)
                           .attr('height',height + padding.top + padding.bottom);
            //添加g标签
            const g = svg.append('g')
                          .attr('transform',`translate(${padding.top}, ${padding.left})`)

//创建下x,y轴

           //像svg添加x轴
            g.append('g')
                .attr('class','axis')
                .attr('transform',`translate(0, ${height})`)
                .call(d3.axisBottom(xscale))
                .attr('font-weight','blod')
            //像svg添加y轴
            g.append('g')
                .attr('class','axis')
                .call(d3.axisLeft(yscale).ticks(10))

创建柱子容器,方便绑定事件

const chart = g.selectAll('bar').data(dataArr).enter().append('g')

绑定数据，画rect

   chart.append('rect')
                .attr('class','bar')
                .attr('x', function (item) {
                    return xscale(item.name)
                })
                .attr('width',xscale.bandwidth())
                .attr('y', function (item) {
                    return yscale(item.value)
                })
                .attr('height', function (item) {
                    return height - yscale(item.value)
                })
                .attr('fill','steelblue')

添加标题

      g.attr('class','title')
                .append('text')
                .attr('transform',`translate(${width/2}, 20)`)
                .attr('text-anchor','middle')
                .attr('font-weight','600')
                .text('最简单的柱状图')
                .attr('fill','#666')

加一个简单的事件交互

   chart.on('mouseover',function () {
                d3.select(this).attr('opacity', '0.7')
            })
                .on('mouseout',function () {
                    d3.select(this).attr('opacity', '1')
                })