d3.js坐标系scaleLinear配置

开发环境为vue2.0

1.安装d3

npm install d3 目前最新文档版本为7.2.1

2.引入d3

import * as d3 from "d3";

3.开始使用

3.1初始化

<template>
  <div id="axis"></div>
</template>
data() {
    return {
      width: 400,
      height: 400,
      margin: {
        top: 30,
        right: 10,
        bottom: 30,
        left: 30,
      },
      data: [100, 150, 200, 250, 280, 300],
    };
  },

//生成svg
      let svg = d3
        .select("#axis")
        .append("svg")
        .attr("width", this.width)
        .attr("height", this.height)
        .style("background", "#bce8f1");

3.2初始化X轴scaleLinear

 //tick 控制显示几段
      //tickFormat 格式化显示
      //tickSizeOuter 控制最外端分段先长度
      //tickSizeInner 控制内部分段线长度
      //tickPadding 分段线与文字的间距
let x = d3
        .scaleLinear()
        .domain([0, 10])
        .range([0, this.width - this.margin.left - this.margin.right]);
        let axisX = d3
        .axisBottom(x)
        .ticks(5)
        .tickFormat((data) => {
          return `数据${data}`;
        })
        .tickSizeOuter(20)
        .tickSizeInner(10)
        .tickPadding(10);
      svg
        .append("g")
        .attr(
          "transform",
          `translate(${this.margin.left},${this.height - this.margin.bottom})`
        )
        .call(axisX);

3.3生成X轴scaleTime

 const data = [new Date("2020-1-1 0:0:0"), new Date("2020-1-1 14:0:0")];
      let x = d3
        .scaleTime()
        .domain([d3.min(data), d3.max(data)])
        .range([0, this.width - this.margin.left - this.margin.right]);
      let xAxis = d3
        .axisBottom(x)
        .ticks(d3.timeHour.every(3))
        .tickFormat(d3.timeFormat("%H:%M"));
      svg
        .append("g")
        .attr(
          "transform",
          `translate(${this.margin.left},${this.height - this.margin.bottom-50})`
        )
        .call(xAxis);

3.4生成Y轴

let y = d3
        .scaleLinear()
        .domain([0, d3.max(this.data)])
        .range([this.height - this.margin.top - this.margin.bottom, 0]);
      svg
        .append("g")
        .attr("transform", `translate(${this.margin.left},${this.margin.top})`)
        .call(d3.axisLeft(y));