参考

https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

实现了网格线

他的思路是把d3中坐标轴的标记线延长到覆盖整个绘图区域，也就是修改ticks()，我觉得这样很巧妙

在我读过的各篇文章里，关于d3坐标轴的ticks()大都语焉不详

首先坐标轴要对应一个比例尺d3.scale()，比例尺包含了domain()和range()，其中domain对应的是原始数据，就是要分析的数据，range()对应的是屏幕显示的数据，也就是像素。scale比例尺负责把原始数据映射到屏幕上，或者可以理解为domain是定义域，range是值域

坐标轴仅显示比例尺中的range()，超出range()的部分是不显示的，也就是不包含在坐标轴里的

然后ticks()是设定整个坐标轴上到底要有几个标记，而不是标记之间的间隔，标记上显示的文字是比例尺的domain()值

通过设定tickSize()使其覆盖整个显示区域就可以用ticks绘制成网格线。在参考案例中还提供了透明度选项，可以避免网格线影响实际数据的呈现

因为这是vue单文件组件内的函数，所以this对应的是上下文组件，其中的数据都是在data中定义的

drawAxises () {
      this.axises.x = d3.axisBottom().scale(this.axises.xScale)
      this.axises.y = d3.axisRight().scale(this.axises.yScale)
      this.axises.x.ticks((this.width + 2) / (this.height + 2) * 10)
        .tickSize(this.height)
        .tickPadding(8 - this.height)
      this.axises.y.ticks((this.width + 2) / (this.height + 2) * 10)
        .tickSize(this.width)
        .tickPadding(8 - this.width)
      this.axises.xContainer = this.axises.node.append('g')
      this.axises.xContainer.attr('id', 'xaxis').classed('axis', true).style('font-size', '20px')
      this.axises.xContainer.call(this.axises.x) // this.axises.x(this.axises.xContainer)
      this.axises.yContainer = this.axises.node.append('g')
      this.axises.yContainer.attr('id', 'yaxis').classed('axis', true).style('font-size', '20px')
      this.axises.yContainer.call(this.axises.y) // this.axises.y(this.axises.yContainer)
    },

参考里还提供了用渐变svg图作为背景图片，不过我在vue中无论如何也无法插入，实现不了，如果有谁能实现，请留言，不胜感激