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,
       width: Number,
       height: Number,
       dataset: Array
     },
     mounted() {
       this.init();
     },
     methods: {
       init() {
         d3.select("#svg" + this.id).remove();
         let width = this.width ? this.width : ;
         let height = this.height ? this.height : ;
         let padding = {
           left: ,
           right: ,
           top: ,
           bottom:
         }
         let colorZ = d3.scaleOrdinal(d3.schemeDark2)
         let parseTime = d3.timeParse("%Y-%m-%d")
         let xScale = d3.scaleTime().range([, 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, ])
         yScale.domain([, d3.max(this.dataset.flatMap((d) =>  d.value.map( v => v.value) )) + ])
         let xAxis = d3.axisBottom(xScale).tickFormat(d => d.getFullYear() + '-' + (d.getMonth() + ) + '-' + 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', -)
           .attr('dy', )
           .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 = ,
             tp_y =;
           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", )
             .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()
             .ease(d3.easePolyOut)
             .delay((d, i) => i * )
             .style('stroke-dashoffset', )
           svg.selectAll('circle1')
             .data(v.value)
             .enter()
             .append('circle')
             .attr('cx', (d, i) => {
               let x = xScale(parseTime(d.key))
               if (i === v.value.length - ) tp_x = x -
               return x
             })
             .attr('cy', (d, i) => {
               let y = yScale(d.value)
               if (i === v.value.length - ) tp_y = y -
               return y
             })
             .attr('r', )
             .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)) - ) + "," + (yScale(d.value) + )  + ")" )
               g.append("rect")
                 .attr("x", function(d){ return this.parentNode.getBBox().x - ;})
                 .attr("y", function(d, i){ return  this.parentNode.getBBox().y - })
                 .attr("width", )
                 .attr("height", )
                 .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()
             .ease(d3.easePolyIn)
             .delay((d, i) => i * )
             .attr('r', )
           // 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: }, {key: '2015-1-2', value: }, {key: '2015-1-3', value: }, {key: '2015-1-17', value: }]
           },
           {
             'name': '海南',
             'value': [{key: '2015-1-1', value: }, {key: '2015-1-2', value: }, {key: '2015-1-3', value: }, {key: '2015-1-17', value: }]
           },
           {
             'name': '天津',
             'value': [{key: '2015-1-2', value: }, {key: '2015-1-3', value: }, {key: '2015-1-4', value: }, {key: '2015-1-5', value: }]
           }
         ]
       }
     },
     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/