D3 v4.x入门（1-1）—— 简单粗暴的尝试

灰太狼 2021-09-15 22:58 302阅读 0赞

说到d3，就不得不提到echarts，这两个工具都是用于数据可视化的，什么是数据可视化？说白了就是用图表展示数据，看起来更直观，仅此而已。

个人使用过echarts做过数据可视化网站，但我对echarts具体是如何渲染图形还一无所知，当初学完canvas就没实践过，现在直接出了echarts，用原生canvas绘图的人也越来越少咯，可惜可惜。echarts还没开始了解，大佬又布置了任务，说以后想结合echarts的美观和d3的灵活做数据可视化，行吧，开始吧。

简单了解了d3后，可以总结出d3和echarts的一些不同

1.echarts是通过canvas标签渲染图层的；d3是通过svg标签渲染图层的。

2.echarts的绘制操作都在js中完成，在dom中只保留一个<canvas>标签；d3的绘制操作也在js中完成，但每个元素在dom上保留了标签，也就是说你可以通过暴力访问的方法去修改这些元素。

3.使用echarts你可以什么都不知道，直接下个包，传个很复杂的配置参数（当然官网会有配置参数的详细说明）就完事儿；使用d3你必须要了解他的API，如果你不知道rect代表矩形，你怎么绘制柱状图？

关于d3中复杂的使用方式和运行机制以及现在遇到的一些坑我统统不想解决，今天我只想实现一个简简单单的一个带动画的柱状图。直接上代码。

<template>
      <div id='svgContainer' style="margin:200px auto;width:400px;height:300px">
    
      </div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
      data () {
        return {
          rectArr: [210, 250, 170, 130, 90, 280, 121, 77]
        }
      },
      mounted () {
        let _this = this
        let rectArr = _this.rectArr
        let width = 400
        let height = 300
        let svg = d3.select('#svgContainer').append('svg').attr('width', width + 'px').attr('height', height + 'px')
        // 插入柱状图
        svg.selectAll('rect')
          .data(rectArr)
          .enter()
          .append('rect')
          .attr('transform', 'translate(' + width + ',' + height + ') rotate(180)')
          .attr('y', function (d, i) { return 0 })
          .attr('x', function (d, i) {
            return width - width / rectArr.length * (i + 1)
          })
          .attr('height', function (d) {
            return 0
          })
          .attr('width', width / rectArr.length - 5)
          .transition()
          .delay(function (d, i) {
            return i * 200
          })
          .duration(2000)
          .ease(d3.easeBounce)
          .attr('height', function (d, i) {
            return d
          })
          .attr('fill', 'steelblue')
    
        // 插入说明
        svg.selectAll('text')
          .data(_this.rectArr)
          .enter()
          .append('text')
          .attr('y', function (d, i) { return 0 })
          .attr('x', function (d, i) {
            return width / rectArr.length * i + 5
          })
          .attr('dx', 0)
          .text(function (d) {
            return d
          })
          .transition()
          .delay(function (d, i) {
            return i * 200
          })
          .attr('dy', function (d) {
            return height - d - 5
          })
          .duration(2000)
          .ease(d3.easeBounce)
      },
      methods: {
    
      }
    }
    </script>
    <style lang="less">
    
    </style>

本次自学内容是d3 v4x 的版本，由于网上很多都是v3x版本的教程，甚至连书都是，所以打算尝试一下v4x的d3版本，个人觉得d3的使用及其不方便，所以想要把一些常用的图形都封装成函数调用传参的形式，也就是echarts的形式，最后return 最外层svg，保留d3拓展性强的特性。

终极目标：结合d3的优点和echarts的优点开发可视化工具库。

短期目标：实现各种常用可视化工具。

短期目标内容如下：柱状图 、折线图、饼状图、力导向图、弦图、树状图、集群图、捆图、打包图、直方图、分区图、堆栈图、矩阵树图。