Vue和D3.js構建圖表

Vue 和D3.js構建簡單曲線圖

1.說明

• 採用Vue-cli腳手架;

• 採用原生D3.js;

• 曲線圖。
  

分析

<template>
       <div id="line"></div>
   </template>
   <script>
      export default {
       name: 'vue-line-chart',//名稱
       data() {               //數據
         return {
         data: [[
           {x: 0, y: 5}, {x: 1, y: 9}, {x: 2, y: 7},
           {x: 3, y: 5}, {x: 4, y: 3}, {x: 6, y: 4},
           {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 2}
            ]]
          };
         },
       mounted() {
         this.render(this.data);  //渲染圖表
       },
       props:{                  
         width:500, 
         height:500,
         margin:50
       },
       methods: {
      
       getScales(){ //定義x座標軸和y座標軸的尺度
         let width = 500,
           height = 500,
           margin = 50,
           x = d3.scale.linear() //定義x尺度
             .domain([0, 10])
             .range([margin, width - margin]),
           y = d3.scale.linear() //定義y尺度
             .domain([0, 10])
             .range([height - margin, margin]);
         return {x, y,width,height,margin}
       },
       
       
      
       createSvg(){   //建立一個畫布,並設置大小
         let svg = d3.select("#line").append("svg").attr("class","axis")
           .attr("height", 500)
           .attr("width", 500);
         return svg
       },
       
       
       
       createPath(svg,x,y,data){  //生成曲線
         let line = d3.svg.line() 
           .x(function (d) {
             return x(d.x);
           })
           .y(function (d) {
             return y(d.y);
           });
        
         
         svg.selectAll("path") //建立svg:path元素
           .data(data)
           .enter()
           .append("path")
           .attr("class", "line")
           .attr("d", function (d) {
             return line(d);
           });
         },
         
         
          function renderXAxis(svg){    //渲染x座標
           let scale = d3.scale.linear()  //x軸尺度
             .domain([0, 10])
             .range([0, quadrantWidth()]);
 
           let xAxis = d3.svg.axis()  //建立x軸
             .scale(scale)          //設置x軸尺度  
             .orient("bottom");   //設置x軸位置
  
           svg.append("g")            // 移動x軸的位置，保證從原點開始
             .attr("class", "x-axis")
             .attr("transform", function(){ 
               return "translate(" + xStart()
                 + "," + yStart() + ")";
             })
             .call(xAxis);
 
           d3.selectAll("g.x-axis g.tick") // 設置刻度線和網格線
             .append("line") // <-C
             .classed("grid-line", true)
             .attr("x1", 0) // <-D
             .attr("y1", 0)
             .attr("x2", 0)
             .attr("y2", - (quadrantWidth()));  // <-E
         }
        
         function renderYAxis(svg){   //渲染y座標
           let scale = d3.scale.linear()//y軸尺度
             .domain([10, 0])
             .range([0, quadrantHeight()]);
 
           let yAxis = d3.svg.axis()//建立y軸
             .scale(scale)          //設置y軸尺度 
             .orient("left");      //設置y軸位置  
 
           svg.append("g")       //移動y軸的位置，保證從原點開始
             .attr("class", "y-axis")
             .attr("transform", function(){
               return "translate(" + xStart()
                 + "," + yEnd() + ")";
             })
             .call(yAxis);
           d3.selectAll("g.y-axis g.tick") // 設置刻度線和網格線
             .append("line")
             .classed("grid-line", true)
             .attr("x1", 0)
             .attr("y1", 0)
             .attr("x2", quadrantHeight()) // <-F
             .attr("y2", 0);
         }
        
         render(data){      //渲染總函數
           let {x, y,width,height,margin} = this.getScales();//導入參數
           let svg = this.createSvg();        //導入svg
           this.createPath(svg,x,y,data);    //畫線
           renderXAxis(svg);                //渲染x座標軸
           renderYAxis(svg);               //渲染y座標軸
          
         
         
         //工具類函數
         function xStart() {
           return margin;
         };
         function yStart() {
           return height - margin;
         };
         function xEnd() {
           return width - margin;
         };
         function yEnd() {
           return margin;
         };
         function quadrantWidth() {
           return width - 2 * margin;
         };
         function quadrantHeight() {
           return height - 2 * margin;
         };
       },
    }
   }
   </script>
  <style>
  ……
  </style>