D3绘制带刻度的柱状图

1.问题

Vue结合D3绘制带有横纵坐标的柱状图，并绑定鼠标hover和点击事件，版本为D3 v6

<template>
  <div>
    <h1>D3练习</h1>
    <div id="container">
      <p>hello world 1</p>
      <p>hello world 2</p>
    </div>
    <!-- <div class="xAxis-wrapper"></div> -->
  </div>
</template>

import * as d3 from 'd3'
export default {
  data() {
    return {
      name: 'D3Exec',
      containerWidth: 500, //画布的宽度
      containerHeight: 500, //画布的高度
    }
  },
  mounted() {
    var margin = { top: 30, bottom: 40, left: 20, right: 20 } //设置边距
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5]

    let that = this
    //1.得到svg画布
    var svg = d3
      .select('#container') //选择文档中的body元素
      .append('svg') //添加一个svg元素
      .attr('width', that.containerWidth) //设定宽度
      .attr('height', that.containerHeight) //设定高度/

    // 2.定义一个用来装整个图表的一个分组，并设置他的位置
    var g = svg
      .append('g')
      .attr('transform', 'translate(' + margin.top + ',' + margin.left + ')')

    // 3.为x轴和y轴定义比例尺
    let xScale = d3
      .scaleBand()
      .domain(d3.range(dataset.length))
      .rangeRound([0, that.containerWidth - margin.left - margin.right])
    let xAxis = d3.axisBottom(xScale)

    let yScale = d3
      .scaleLinear()
      .domain([0, d3.max(dataset)])
      .range([that.containerHeight - margin.top - margin.bottom, 0]) //d3.range返回的是一个等差数列，dataeset.length=9,此处返回的是0-8的等差数列
    let yAxis = d3.axisLeft(yScale)

    // 4.为每个矩形和对应的文字创建一个分组，返回值是一个包含有dataset.length个<g>元素的选择集
    let gs = g.selectAll('rect').data(dataset).enter().append('g')

    // 5.绘制矩形
    let rectPadding = 20
    gs.append('rect')
      .attr('x', function (d, i) {
        //设置左上点的x
        return xScale(i) + rectPadding / 2
      })
      .attr('y', function (d) {
        //设置左上点的y
        return yScale(d)
      })
      .attr('width', function () {
        //设置宽
        return xScale.step() - rectPadding
      })
      .attr('height', function (d) {
        //设置高
        return that.containerHeight - margin.top - margin.bottom - yScale(d)
      })
      .attr('fill', 'orange') //颜色填充
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

      .on('click', function () {
        console.log(this)
      })
      .on('mouseover', function () {
        console.log(this)
        var rect = d3
          .select(this)
          .transition()
          .duration(500) //当鼠标放在矩形上时，矩形变成蓝色
          .attr('fill', 'blue')
      })

      .on('mouseout', function () {
        var rect = d3
          .select(this)
          .transition()

          .duration(500) //当鼠标移出时，矩形变成黄色
          .attr('fill', 'orange')
      })
    // 6.绘制文字
    gs.append('text')
      .attr('x', function (d, i) {
        return xScale(i) + rectPadding / 2 + 10
      })
      .attr('y', function (d) {
        return yScale(d)
      })
      .attr('dx', function () {
        return (xScale.step() - rectPadding) / 2
      })
      .attr('dy', 20)
      .text(function (d) {
        return d
      })

    g.append('g')
      .attr(
        // 设置位置信息
        'transform',
        'translate(' +
          margin.left +
          ',' +
          (that.containerHeight - margin.bottom) +
          ')',
      )
      .attr('class', 'xAxis')
      .call(xAxis) // xAxis是一个函数，将新建的分组g传递给xAxis()函数，等价于xAxis(g.append("g"))
    g.append('g')
      .attr(
        // 设置位置信息
        'transform',
        'translate(' + margin.left + ',' + margin.top + ')',
      )
      .call(yAxis) // xAxis是一个函数，将新建的分组g传递给xAxis()函数，等价于xAxis(g.append("g"))
  },
  methods: {},
}