Vue整合d3.v5.js制作--折线图(line)

先上效果图（x轴固定为时间轴）：

图中出现的悬浮框是鼠标悬停效果

1、环境说明：

vue版本："vue": "^2.5.2"
d3版本："d3": "^5.9.1"

2、Line.vue源码

<template>
  <div class="d3line" :id="id">
  </div>
</template>

<script>
  import * as d3 from 'd3'
  export default {
    name: 'd3line',
    props: {
      id: String,
       Number,
      height: Number,
      dataset: Array
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        d3.select("#svg" + this.id).remove();
        let width = this.width ? this.width : 600;
        let height = this.height ? this.height : 600;
        let padding = {
          left: 80,
          right: 50,
          top: 50,
          bottom: 50
        }
        let colorZ = d3.scaleOrdinal(d3.schemeDark2)
        let parseTime = d3.timeParse("%Y-%m-%d")
        let xScale = d3.scaleTime().range([0, width - padding.left - padding.right])
        let dates = this.dataset.flatMap((d) => d.value.map(v => parseTime(v.key)))
        xScale.domain([d3.min(dates), d3.max(dates)])
        let yScale = d3.scaleLinear().range([height - padding.top - padding.bottom, 0])
        yScale.domain([0, d3.max(this.dataset.flatMap((d) =>  d.value.map( v => v.value) )) + 2])
        let xAxis = d3.axisBottom(xScale).tickFormat(d => d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate())
        let yAxis = d3.axisLeft(yScale)
        let svg = d3.select("#" + this.id).append("svg").attr("width", width).attr("height", height).attr("id", "svg" + this.id);
        svg.append('g')
          .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
          .call(xAxis)
          .selectAll('text')
          .attr('dx', -20)
          .attr('dy', 10)
          .attr('transform', 'rotate(-20)')
          .style('font-weight', 'bold')
        svg.append('g')
          .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
          .call(yAxis)
          .selectAll('text')
          .style('font-weight', 'bold')
        let line = d3.line().x(d => xScale(parseTime(d.key))).y(d => yScale(d.value))
        this.dataset.forEach((v, vi) => {
          let tp_x = 0,
            tp_y =0;
          svg.append("path")
            .attr('d' , line(v.value))
            .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
            .attr('fill', 'none')
            .attr('stroke', (d, i) => colorZ(vi))
            .attr("stroke-width", 2)
            .style('stroke-dasharray', function(d, i) {
              return d3.select(this).node().getTotalLength();
            })
            .style('stroke-dashoffset', function(d, i) {
              return d3.select(this).node().getTotalLength();
            })
            .transition()
            .duration(2000)
            .ease(d3.easePolyOut)
            .delay((d, i) => i * 200)
            .style('stroke-dashoffset', 0)
          svg.selectAll('circle1')
            .data(v.value)
            .enter()
            .append('circle')
            .attr('cx', (d, i) => {
              let x = xScale(parseTime(d.key))
              if (i === v.value.length - 1) tp_x = x - 40
              return x
            })
            .attr('cy', (d, i) => {
              let y = yScale(d.value)
              if (i === v.value.length - 1) tp_y = y - 10
              return y
            })
            .attr('r', 2)
            .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
            .style("fill", (d, i) => colorZ(vi))
            .on("mouseover", (d, i) => {
              let g = svg.append('g')
                .attr('id', `hoverg${vi}${d.key}${d.value}`)
                .attr("transform", "translate(" + (xScale(parseTime(d.key)) - 20) + "," + (yScale(d.value) + 30)  + ")" )
              g.append("rect")
                .attr("x", function(d){ return this.parentNode.getBBox().x - 3;})
                .attr("y", function(d, i){ return  this.parentNode.getBBox().y - 20})
                .attr("width", 110)
                .attr("height", 25)
                .style("fill", "#fffbf0")
              g.append('text')
                .text(`${d.key}:${d.value}`)
                .style("fill", colorZ(vi))
            })
            .on("mouseout", (d) => d3.select(`#hoverg${vi}${d.key}${d.value}`).remove())
            .transition()
            .duration(1500)
            .ease(d3.easePolyIn)
            .delay((d, i) => i * 200)
            .attr('r', 5)
          // svg.selectAll('text1')
          //   .data([v.name])
          //   .enter()
          //   .append('text')
          //   .attr('dx', (d, i) => tp_x)
          //   .attr('dy', (d, i) => tp_y)
          //   .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
          //   .text((d) => d)
          //   .style("fill", (d, i) => colorZ(vi))
          //   .style('font-weight', 'bold')
          svg.append('text')
            .attr('dx', tp_x)
            .attr('dy', tp_y)
            .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
            .text(v.name)
            .style("fill", colorZ(vi))
            .style('font-weight', 'bold')
        })
      }
    },
    watch: {
      dataset() {
        this.init();
      }
    }
  }
</script>

<style>

</style>

3、使用示例

<template>
  <div id="test">
    <!-- 一定要传进去一个id，随便传一个 -->
    <d3line id="line" :dataset="data1"></d3line>
  </div>
</template>

<script>
  import d3line from '@/components/d3/Line'
  export default {
    name: 'test',
    data() {
      return {
        data1: [
          {
            'name': '哈尔滨',
            'value': [{key: '2015-1-1', value: 10}, {key: '2015-1-2', value: 12}, {key: '2015-1-3', value: 13}, {key: '2015-1-17', value: 17}]
          },
          {
            'name': '海南',
            'value': [{key: '2015-1-1', value: 9}, {key: '2015-1-2', value: 48}, {key: '2015-1-3', value: 5}, {key: '2015-1-17', value: 49}]
          },
          {
            'name': '天津',
            'value': [{key: '2015-1-2', value: 30}, {key: '2015-1-3', value: 1}, {key: '2015-1-4', value: 32}, {key: '2015-1-5', value: 10}]
          }
        ]
      }
    },
    components: {
      d3line
    },
    methods: {

    }
  }
</script>

<style scoped>
</style>

4、参考资料

https://github.com/d3/d3-scale-chromatic/blob/master/README.md#schemeCategory10

https://github.com/d3/d3-time-format#format

https://jakearchibald.com/2013/animated-line-drawing-svg/