d3-v4.x版本-折线图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dengzeyuan/article/details/84286358

v4.x 版本-折线图

代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。

demo实现效果图如下：

实现代码如下：（包含关键代码注释）

<template>
  <div class="hello">
  </div>
</template>

<script>
const d3 = require("d3");
// import * as d3 from "d3"
export default {
  name: "Emotion",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted: function() {
    this.$nextTick(function() {

      var dataset = [20, 40, 20, 40, 20, 50];
      var width = 400;
      var height = 400;

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px dashed #ccc");

      var padding = { left: 30, right: 30, top: 20, bottom: 20 };
      var grap = 10;

      var xScale = d3 //x轴比例尺
        .scaleBand()
        .domain(d3.range(dataset.length))
        .range([0, width - padding.left - padding.right]);

      var yScale = d3 //y轴比例尺
        .scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([width - padding.top - padding.bottom, 0]);

      //x轴
      var gAxis = svg
        .append("g")
        .attr(
          "transform",
          "translate(" + padding.left + "," + (height - padding.bottom) + ")"
        )
        .call(d3.axisBottom(xScale));

      //y轴
      var gYxis = svg
        .append("g")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.top + ")"
        )
        .call(d3.axisLeft(yScale));

      //折线图
      //还可以利用路径元素<path>配合路径生成器
      var ss = svg
        .selectAll(".line")
        .data(dataset)
        .enter()
        .append("line")
        .attr("style", "stroke:red")
        .attr("curve", "curve")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.bottom + ")"
        )
        .attr("x1", function(d, i) {
          return xScale(i) + xScale.step() / 2;
        })
        .attr("y1", function(d, i) {
          return yScale(d);
        })
        .attr("x2", function(d, i) {
          return i + 1 < dataset.length
            ? xScale(i + 1) + xScale.step() / 2
            : xScale(i) + xScale.step() / 2;
        })
        .attr("y2", function(d, i) {
          return i + 1 < dataset.length
            ? yScale(dataset[i + 1])
            : yScale(dataset[i]);
        });
      var line = d3.line().curve(d3.curveCatmullRom.alpha(0));
      line(ss);

      //圆点
      svg
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.bottom + ")"
        )
        .attr("cx", function(d, i) {
          return xScale(i) + xScale.step() / 2;
        })
        .attr("cy", function(d) {
          return yScale(d);
        })
        .attr("r", 5)
        .attr("fill", function(d, i) {
          // return getColor(i);
        });

      //图形标注
      var texts = svg
        .selectAll("MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("fill", "black")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.top + ")"
        )
        .attr("x", function(d, i) {
          return xScale(i) + xScale.step() / 2;
        })
        .attr("y", function(d, i) {
          return yScale(d);
        })
        // .attr("dx", function() {
        //   return (xScale.bandwidth() - grap) / 2; //V4版本
        //   // return (xScale.step() - grap) / 2; //V4版本

        //   //step（）  和 bandwidth（）都表示坐标两点间的距离
        // })
        // .attr("dy", function() {
        //   return "-.5em";
        // })
        .text(function(d) {
          return d;
        });

    });
  },
  beforeDestroy: function() {
    this.$service();
  }
};
</script>