vue + d3系列 -- 柱状图

2018-11-07  本文已影响0人  神话降临
前言

因为我之前用的是echarts来做数据可视化,而且用了相当长一段事件,基本上各种图形都用过,所以对数据可视化的一些基础的东西还有交互还是有一些了解的,所以知道不管是canvas还是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')
                })
上一篇下一篇

猜你喜欢

热点阅读