d3基础知识

h5：

<svg  style="background-color: #fff;" id="data_area" height="300" width="450"></svg>

Angular ts文件：

import * as d3 from 'd3';

  ngOnInit(): void {

    // this.setD3Circle();

    this.setMargin();

  }

  setD3Circle() {

    var svg = d3.select('#data_area')

      .append("g") // 添加标尺

      .attr("transform", "translate(30, 30)"); // 平移图像

    var x = d3.scaleLinear()

      .domain([0, 100])

      .range([0, 400]);

    var y = d3.scaleLinear()

      .domain([100, 0])

      .range([200, 0]);

    svg.append('g').attr("transform", "translate(0," + 200 + ")").call(d3.axisBottom(x));

    svg.append('g').call(d3.axisLeft(y));

    // 以百分比设置图片尺寸

    svg.append("circle")

        .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");

    svg.append("circle")

        .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");

    svg.append("circle")

        .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");

    // svg.append('circle').attr('cx', 3).attr('cy', 3).attr('r', 40).style('fill', 'blue');

    // svg.append('circle').attr('cx', 120).attr('cy', 70).attr('r', 40).style('fill', 'red');

    // svg.append('circle').attr('cx', 300).attr('cy', 100).attr('r', 40).style('fill', 'green');

  }

运行结果如下图所示：

  setMargin(){

    // 设置图形的尺寸和边距

    var margin = { top: 10, right: 40, bottom: 30, left: 30 },

    width = 450 - margin.left - margin.right,

    height = 300 - margin.top - margin.bottom;

    // 将svg对象附加到页面主体

    var svg = d3.select("#data_area")

      .append("g") // 添加标尺

      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 平移图像

    var data = [{ x: 10, y: 20 }, { x: 40, y: 90 }, { x: 80, y: 50 }]

    // 创建x轴比例尺

    var x = d3.scaleLinear()

      .domain([0, 100])

      .range([0, width]);

    svg.append('g')

      .attr("transform", "translate(0," + height + ")")

      .call(d3.axisBottom(x));

    // 创建y轴比例尺

    var y = d3.scaleLinear()

      .domain([0, 100])

      .range([height, 0]);

    svg.append('g')

      .call(d3.axisLeft(y));

    svg.selectAll("whatever")

      .data(data)

      .enter()

      .append("circle")

      .attr("cx", function (d) { return x(d.x) })

      .attr("cy", function (d) { return y(d.y) })

      .attr("r", 5)

  }

运行结果如下图所示：