美文网首页
vue + d3系列 -- 柱状图

vue + d3系列 -- 柱状图

作者: 神话降临 | 来源:发表于2018-11-07 15:49 被阅读0次
    前言

    因为我之前用的是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')
                    })
    

    相关文章

      网友评论

          本文标题:vue + d3系列 -- 柱状图

          本文链接:https://www.haomeiwen.com/subject/gkuyxqtx.html