D3 v4.x 的echarts化（2-1）—— 柱状图完善

柔情只为你懂 2021-09-16 07:40 289阅读 0赞

![70][]

d3的第二阶段正式开始了。鉴于这个系列最后会封装成vue的组件，有时候代码改起来不能及时更新到博客，所以在这里留下项目的github地址，有兴趣的同学可以去看源码。

[  点击前往项目地址][Link 1]

按照惯例，每个系列的开头会介绍一下该系列要做什么，本系列主要是在上一系列（d3新版本入门系列）的基础上，实现图形视觉上的优化，如动画，添加背景色，颜色过渡等，功能上的完善，如添加tooltips提示框，添加图例，标题等。整体的设计会偏向于echarts的视觉和功能设计。当然，除了实现echarts的功能，还可以在其基础上有一些新的突破（目前来看，突破是不可能突破，echarts的柱状图就写了半天，还是最普通的，较为复杂的柱状图后面会补上，当然这并不代表不能做突破，只是我个人比较懒，如果有比较懒的功能可以加，我肯定会加的）。D3最大的好处就是所有的图形都可以手动绘制，因此你可以发挥你的想象力do anything！但是，这也是D3最蛋疼的地方，尽管他已经做了一部分操作的封装，然而并没有简化操作流程，就今天的柱状图来说大概分为这几步

绘制标题 => 绘制横坐标 => 绘制纵坐标 => 绘制背景柱图 => 绘制柱图  => 写一个过渡颜色  => 把过渡添加到柱图上实现颜色渐变  =>  添加柱图鼠标事件  => 添加柱图文字

就一个简单柱图，还未封装的情况下写了将近200行代码。这对于实际生产使用针的太不友好了，因此这一阶段结束后，我会把写好的图形全部封装成组件，把公共参数提取出来，用组件传值的方式使用到实际生成环境中去。

下面我会按照上述流程，逐步实现一个柱状图。（本系列的第一章尽量详细一些，当然代码注释也很详细，后面的请自己阅读注释）

**第一步：绘制标题**， 事实上这是我的最后一步，因为刚开始并不需要考虑标题这种东西，在绘制标题之前需要做一些准备工作。

<template>
      <div id="bar"></div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
      data () {
        //请自行脑补会用到哪些参数，这里为了说明省略了
      }，
      //注意你的代码应该放在mounted dom渲染完毕周期中，不然你会因为获取不到容器而报错
      mounted(){
        //需要获取父容器
        let dom = document.getElementById('bar')
        // dom容器宽高,参数padding获取
        let width = parseFloat(this.width) || parseFloat(this.getStyle(dom, 'width'))
        let height = parseFloat(this.height) || parseFloat(this.getStyle(dom, 'height'))
        let padLeft = parseFloat(this.padding.left)
        let padRight = parseFloat(this.padding.right)
        let padTop = parseFloat(this.padding.top)
        let padBottom = parseFloat(this.padding.bottom)
        // 设置柱状图最小高度,默认为0
        let minHeight = parseFloat(this.minHeight) || 0
        // 设置分段之间的间隔,默认为5
        let paddingInner = parseFloat(this.paddingInner)
        // 设置第一个和最后一个 band 的外边距.
        // let paddingOuter = parseFloat(this.paddingOuter)
        // 检查宽高参数是否有问题
        if (isNaN(width) || isNaN(height)) {
          console.error('width 或 height 参数错误')
          return
        }
        // 检查padding参数是否有问题
        if (isNaN(padLeft) || isNaN(padRight) || isNaN(padTop) || isNaN(padBottom)) {
          console.error('padding 参数错误')
          return
        }
      }
    }

上面做了一些数据预处理，下面开始正式绘制svg标签。

// 创建画布
        let svg = d3.select('#bar')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
        // 先绘制标题，由于标题要占位置，所以增加padTop值
        padTop += 50
        svg.append('text')
          .attr('class', 'titles')
          .text(this.title.content)
          .attr('y', padTop - 50)
          .attr('dy', '1em')
          // 标题居中
          // .attr('x', (width - padLeft - padRight) / 2)
          // .attr('dx', -this.title.content.toString().length / 2 + 'em')
          // 标题居左
          .attr('x', 0)
          .style('font-family', 'SimHei')
          .style('font-size', '22px')

**第二步，绘制x轴和y轴**，这里有一个两个小细节。第一个细节是，在我设置完毕y轴的比例尺yScale之后，我重新设置了max的值，因为我在yScale()中添加了.nice()方法，这个方法会将输入范围扩展到漂亮的整数，比如数组【1，5，20，21】，如果不设置nice，比例尺是这样的【0，5，10，15，20，21】，如果设置了，比例尺就会漂亮一些变成【0，5，10，15，20，25】。所以他自动把最大值从21变成25了，这会影响后续的计算，因此需要重新设置最大值。第二个细节是，y轴的输出范围是从大到小的，也就是value=0的时候，输出的y是最大的，这是因为d3的坐标轴的远点在左上角，因此y轴和我们平时用的y轴是相反的。

// 计算值的最大值
        let max = d3.max(this.data)
        // 创建一个线性比例尺
        // linearScale.ticks - 从输入范围中提取具有代表意义的值.
        // linearScale.tickFormat - 将刻度格式化为人类友好的格式.
        // linearScale.nice - 将输入范围扩展到漂亮的整数.
        let yScale = d3.scaleLinear().domain([0, max]).range([height - padTop - padBottom, minHeight]).nice()
        // 注意这里有个小细节,我重新设置了max的值
        // [120, 205, 150, 80, 70, 110, 130] yScale.domain(0,205).nice()
        // console.log(yScale.domain()) [0,220] 所以这里要更新下max的值
        max = yScale.domain()[1]
        // 创建y轴
        let yAxis = d3.axisLeft().scale(yScale)
        svg.append('g')
          .attr('transform', 'translate(' + padLeft + ',' + padTop + ')')
          .call(yAxis)
        // 创建一个序数分段比例尺.
        let xScale = d3.scaleBand()
          .domain(this.xAxis.data)
          .range([0, width - padLeft - padRight])
        // 创建x轴
        // .tickPadding([]) 设置刻度和文字的距离
        // .tickSizeInner([]) 设置内部刻度长度
        // .tickSizeOuter([]) 设置外部刻度长度
        // .tickSize([]) 设置内部和外部刻度长度
        let xAxis = d3.axisBottom().scale(xScale).tickPadding([5]).tickSizeInner([5]).tickSizeOuter([-5])
        svg.append('g')
          .attr('transform', 'translate(' + padLeft + ',' + (height - padBottom) + ')')
          .call(xAxis)

**第三步，添加柱状图的背景色**。为什么要先加背景，而不是最后才加，因为svg标签图形是一层一层渲染的，后面的会覆盖前面的，而且不能设置z-index属性，因为他压根就没有。这里需要注意一下。

// 由于层级问题,只能先渲染阴影,因为阴影层级较低
        svg.selectAll('.shadow')
          .data(this.data)
          .enter()
          .append('rect')
          .attr('class', 'shadow')
          .attr('zIndex', '-1')
          .attr('width', xScale.bandwidth() - paddingInner * 2)
          .attr('height', function (d) {
            return yScale(0) // max - d是为了取反
          })
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + paddingInner
          })
          .attr('y', function (d, i) {
            return padTop
          })
          .attr('fill', '#f0f0f0')

**第四步，预先定义好线性渐变**，为了后面使用。

// 添加渐变 定义一个线性渐变
        let defs = svg.append('defs')
        let linearGradient = defs.append('linearGradient')
          .attr('id', 'linearColor')
          .attr('x1', '0%')
          .attr('y1', '0%')
          .attr('x2', '100%')
          .attr('y2', '100%')
        linearGradient.append('stop')
          .attr('offset', '0%')
          .style('stop-color', '#83bff6')
        linearGradient.append('stop')
          .attr('offset', '100%')
          .style('stop-color', '#188df0')

第五步，绘制柱状图。

// 添加柱状图
        let bar = svg.selectAll('.main')
          .data(this.data)
          .enter()
          .append('rect')
          .attr('class', 'main')
          .attr('width', xScale.bandwidth() - paddingInner * 2)
          // height取0,是为了后面过渡动画
          .attr('height', function (d) {
            return 0
          })
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + paddingInner
          })
          // y取x轴位置是为了后面过渡动画
          .attr('y', function (d, i) {
            return height - padBottom
          })
          .style('fill', 'url(#' + linearGradient.attr('id') + ')')
    
        // 柱状图过渡动画
        bar.transition()
          .duration(this.transition.duration)
          .ease(d3[this.transition.type])
          .attr('y', function (d, i) {
            return height - padBottom - yScale(max - d)
          })
          .attr('height', function (d) {
            return yScale(max - d) // max - d是为了取反
          })

第六步，给柱状图添加鼠标事件，添加tooltips提示框

// toolTips提示
        let toolTips = d3.select('body').append('div')
          .attr('class', 'toolTips')
          .style('opacity', 0)
          .style('position', 'absolute')
        // 柱状图交互
        bar.on('mouseover', function (d, i) {
          d3.select(this)
            .transition()
            .duration(200)
            .attr('opacity', '0.8')
        })
          .on('mousemove', function (d) {
            // 这里取得是相对屏幕的坐标，因为tooltip元素放在body中
            let mouseX = d3.event.clientX + 15
            let mouseY = d3.event.clientY - 15
            // 如果你的style用了scoped，那你的样式应该写到App.vue中去，否则插入元素的样式不会生效
            toolTips.html(`<div class="tolTp">${d}</div>`)
              .style('opacity', 1)
              .style('left', mouseX + 'px')
              .style('top', mouseY + 'px')
          })
          .on('mouseout', function (d, i) {
            toolTips.style('opacity', 0)
            toolTips.html('')
            d3.select(this)
              .transition()
              .duration(500)
              .attr('opacity', '1')
          })

最后一步，添加文本，因为文本的渲染层级最高，所以应该最后一步添加

// 这里必须添加class，因为添加坐标轴的时候里面含有text标签，当然你也可以在把坐标轴放到最后添加，就没问题
        svg.selectAll('.text')
          .data(this.data)
          .enter()
          .append('text')
          .attr('class', 'text')
          .text(function (d) { return d })
          .attr('y', function (d, i) {
            return height - padBottom
          })
          // 先把文字从柱状图中间位置开始定位,有点类似left:50%
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + xScale.bandwidth() / 2
          })
          // 设置y偏移
          .attr('dy', function (d, i) {
            return '1.5em'
          })
          // 设置x偏移
          .attr('dx', function (d, i) {
            // 这里由于文字本身有长度,向左移动一半文字长度即可,事实上数字站得位置只有文字一半，因此我除以4，而不是除以2
            // 先转成字符串再计算
            return -d.toString().length / 4 + 'em'
          })
          .attr('fill', 'yellow')
          .transition()
          .duration(this.transition.duration)
          .ease(d3[this.transition.type])
          .attr('y', function (d, i) {
            return height - padBottom - yScale(max - d)
          })

还有一些参数使用和细节说明可以看注释，是非常详细的。最后附当前柱状图源码。

<template>
      <div id="bar"></div>
    </template>
    
    <script>
    import * as d3 from 'd3'
    export default {
      data () {
        return {
          data: [120, 205, 150, 80, 70, 110, 130],
          width: '',
          height: '',
          padding: {
            left: '30px',
            right: '15px',
            top: '5px',
            bottom: '20px'
          },
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          minHeight: 0,
          paddingInner: 5, // 设置分段之间的间隔.
          paddingOuter: 5, // 设置第一个和最后一个 band 的外边距.
          transition: { // 过渡动画
            show: true,
            type: 'easeBounceOut', // d3.easeLinear 等等
            duration: 2000
          },
          color: '',
          title: {
            show: true,
            content: '普通柱状图实例'
          }
        }
      },
      methods: {
        getStyle: function (obj, attr) {
          if (obj.currentStyle) {
            return obj.currentStyle[attr]
          } else {
            return document.defaultView.getComputedStyle(obj, null)[attr]
          }
        }
      },
      mounted () {
        let _this = this
        let dom = document.getElementById('bar')
        // dom容器宽高,参数padding获取
        let width = parseFloat(this.width) || parseFloat(this.getStyle(dom, 'width'))
        let height = parseFloat(this.height) || parseFloat(this.getStyle(dom, 'height'))
        let padLeft = parseFloat(this.padding.left)
        let padRight = parseFloat(this.padding.right)
        let padTop = parseFloat(this.padding.top)
        let padBottom = parseFloat(this.padding.bottom)
        // 设置柱状图最小高度,默认为0
        let minHeight = parseFloat(this.minHeight) || 0
        // 设置分段之间的间隔,默认为5
        let paddingInner = parseFloat(this.paddingInner)
        // 设置第一个和最后一个 band 的外边距.
        // let paddingOuter = parseFloat(this.paddingOuter)
        // 检查宽高参数是否有问题
        if (isNaN(width) || isNaN(height)) {
          console.error('width 或 height 参数错误')
          return
        }
        // 检查padding参数是否有问题
        if (isNaN(padLeft) || isNaN(padRight) || isNaN(padTop) || isNaN(padBottom)) {
          console.error('padding 参数错误')
          return
        }
        // 创建画布
        let svg = d3.select('#bar')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
        // 先绘制标题，由于标题要占位置，所以增加padTop值
        padTop += 50
        svg.append('text')
          .attr('class', 'titles')
          .text(this.title.content)
          .attr('y', padTop - 50)
          .attr('dy', '1em')
          // 标题居中
          // .attr('x', (width - padLeft - padRight) / 2)
          // .attr('dx', -this.title.content.toString().length / 2 + 'em')
          // 标题居左
          .attr('x', 0)
          .style('font-family', 'SimHei')
          .style('font-size', '22px')
    
        // 计算值的最大值
        let max = d3.max(this.data)
        // 创建一个线性比例尺
        // linearScale.ticks - 从输入范围中提取具有代表意义的值.
        // linearScale.tickFormat - 将刻度格式化为人类友好的格式.
        // linearScale.nice - 将输入范围扩展到漂亮的整数.
        let yScale = d3.scaleLinear().domain([0, max]).range([height - padTop - padBottom, minHeight]).nice()
        // 注意这里有个小细节,我重新设置了max的值
        // [120, 205, 150, 80, 70, 110, 130] yScale.domain(0,205).nice()
        // console.log(yScale.domain()) [0,220] 所以这里要更新下max的值
        max = yScale.domain()[1]
        // 创建y轴
        let yAxis = d3.axisLeft().scale(yScale)
        svg.append('g')
          .attr('transform', 'translate(' + padLeft + ',' + padTop + ')')
          .call(yAxis)
        // 创建一个序数分段比例尺.
        let xScale = d3.scaleBand()
          .domain(this.xAxis.data)
          .range([0, width - padLeft - padRight])
        // 创建x轴
        // .tickPadding([]) 设置刻度和文字的距离
        // .tickSizeInner([]) 设置内部刻度长度
        // .tickSizeOuter([]) 设置外部刻度长度
        // .tickSize([]) 设置内部和外部刻度长度
        let xAxis = d3.axisBottom().scale(xScale).tickPadding([5]).tickSizeInner([5]).tickSizeOuter([-5])
        svg.append('g')
          .attr('transform', 'translate(' + padLeft + ',' + (height - padBottom) + ')')
          .call(xAxis)
        // 由于层级问题,只能先渲染阴影,因为阴影层级较低
        svg.selectAll('.shadow')
          .data(this.data)
          .enter()
          .append('rect')
          .attr('class', 'shadow')
          .attr('zIndex', '-1')
          .attr('width', xScale.bandwidth() - paddingInner * 2)
          // height取0,是为了后面过渡动画
          .attr('height', function (d) {
            return yScale(0) // max - d是为了取反
          })
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + paddingInner
          })
          // y取x轴位置是为了后面过渡动画
          .attr('y', function (d, i) {
            return padTop
          })
          .attr('fill', '#f0f0f0')
        // 添加渐变 定义一个线性渐变
        let defs = svg.append('defs')
        let linearGradient = defs.append('linearGradient')
          .attr('id', 'linearColor')
          .attr('x1', '0%')
          .attr('y1', '0%')
          .attr('x2', '100%')
          .attr('y2', '100%')
        linearGradient.append('stop')
          .attr('offset', '0%')
          .style('stop-color', '#83bff6')
        linearGradient.append('stop')
          .attr('offset', '100%')
          .style('stop-color', '#188df0')
        // 添加柱状图
        let bar = svg.selectAll('.main')
          .data(this.data)
          .enter()
          .append('rect')
          .attr('class', 'main')
          .attr('width', xScale.bandwidth() - paddingInner * 2)
          // height取0,是为了后面过渡动画
          .attr('height', function (d) {
            return 0
          })
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + paddingInner
          })
          // y取x轴位置是为了后面过渡动画
          .attr('y', function (d, i) {
            return height - padBottom
          })
          .style('fill', 'url(#' + linearGradient.attr('id') + ')')
    
        // 柱状图过渡动画
        bar.transition()
          .duration(this.transition.duration)
          .ease(d3[this.transition.type])
          .attr('y', function (d, i) {
            return height - padBottom - yScale(max - d)
          })
          .attr('height', function (d) {
            return yScale(max - d) // max - d是为了取反
          })
        // toolTips提示
        let toolTips = d3.select('body').append('div')
          .attr('class', 'toolTips')
          .style('opacity', 0)
          .style('position', 'absolute')
        // 柱状图交互
        bar.on('mouseover', function (d, i) {
          d3.select(this)
            .transition()
            .duration(200)
            .attr('opacity', '0.8')
        })
          .on('mousemove', function (d) {
            // 这里取得是相对屏幕的坐标，因为tooltip元素放在body中
            let mouseX = d3.event.clientX + 15
            let mouseY = d3.event.clientY - 15
            // 如果你的style用了scoped，那你的样式应该写到App.vue中去，否则插入元素的样式不会生效
            toolTips.html(`<div class="tolTp">${d}</div>`)
              .style('opacity', 1)
              .style('left', mouseX + 'px')
              .style('top', mouseY + 'px')
          })
          .on('mouseout', function (d, i) {
            toolTips.style('opacity', 0)
            toolTips.html('')
            d3.select(this)
              .transition()
              .duration(500)
              .attr('opacity', '1')
          })
    
        // 添加文本
        // 这里必须添加class，因为添加坐标轴的时候里面含有text标签，当然你也可以在把坐标轴放到最后添加，就没问题
        svg.selectAll('.text')
          .data(this.data)
          .enter()
          .append('text')
          .attr('class', 'text')
          .text(function (d) { return d })
          .attr('y', function (d, i) {
            return height - padBottom
          })
          // 先把文字从柱状图中间位置开始定位,有点类似left:50%
          .attr('x', function (d, i) {
            return padLeft + xScale(_this.xAxis.data[i]) + xScale.bandwidth() / 2
          })
          // 设置y偏移
          .attr('dy', function (d, i) {
            return '1.5em'
          })
          // 设置x偏移
          .attr('dx', function (d, i) {
            // 这里由于文字本身有长度,向左移动一半文字长度即可,事实上数字站得位置只有文字一半，因此我除以4，而不是除以2
            // 先转成字符串再计算
            return -d.toString().length / 4 + 'em'
          })
          .attr('fill', 'yellow')
          .transition()
          .duration(this.transition.duration)
          .ease(d3[this.transition.type])
          .attr('y', function (d, i) {
            return height - padBottom - yScale(max - d)
          })
      }
    }
    </script>
    
    <style lang="less">
    #bar{
      width: 600px;
      height: 600px;
      margin: 90px 80px;
      padding: 15px 25px;
      border:1px solid #cccccc;
      position: relative;
    }
    .tolTp{
      padding:8px 12px;
      background: rgba(0, 0, 0, 0.7);
      color:white;
    }
    </style>

[70]: /images/20210813/e4a8ba71b43d455bb97153c453f68cd1.png
[Link 1]: https://github.com/dkr380205984/myComponent/tree/master/src/page/d3