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") // 添加標(biāo)尺
? ? ? .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));
? ? // 以百分比設(shè)置圖片尺寸
? ? 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');
? }
運(yùn)行結(jié)果如下圖所示：
? setMargin(){
? ? // 設(shè)置圖形的尺寸和邊距
? ? var margin = { top: 10, right: 40, bottom: 30, left: 30 },
? ? width = 450 - margin.left - margin.right,
? ? height = 300 - margin.top - margin.bottom;
? ? // 將svg對(duì)象附加到頁(yè)面主體
? ? var svg = d3.select("#data_area")
? ? ? .append("g") // 添加標(biāo)尺
? ? ? .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 平移圖像
? ? var data = [{ x: 10, y: 20 }, { x: 40, y: 90 }, { x: 80, y: 50 }]
? ? // 創(chuàng)建x軸比例尺
? ? var x = d3.scaleLinear()
? ? ? .domain([0, 100])
? ? ? .range([0, width]);
? ? svg.append('g')
? ? ? .attr("transform", "translate(0," + height + ")")
? ? ? .call(d3.axisBottom(x));
? ? // 創(chuàng)建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)
? }
運(yùn)行結(jié)果如下圖所示：
