D3.js绘制图表

D3.js用于创建静态SVG图表。 它有助于绘制以下图表：
- 条形图
- 圆图
- 饼形图
- 甜甜圈图表
- 折线图
- 气泡图等

## 条形图
条形图是最常用的图形类型之一，用于显示和比较不同离散类别或组的数量，频率或其他度量（例如平均值）。 该图以这样的方式构造，即不同条的高度或长度与它们所代表的类别的大小成比例。
x轴（水平轴）表示没有比例的不同类别。 y轴（垂直轴）具有刻度，这表示测量单位。 可以垂直或水平绘制条，这取决于类别的数量和类别的长度或复杂性。
### 绘制条形图
思路如下：
1.创建svg图像容器。
2.创建存储数值的数组。
3.用d3.js创建svg图像。
4.用selectAll方法选择所有rect元素。
5.用enter方法追加不足的rect元素。
6.为rect元素顶部追加数值。

示例：

```html
<html>
   <head>
      <script src="https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div id="one"></div>
      <script>
	 var data = [172,200,139,143,145,165];
	 var width = 300;
	 var height =300;
	 var y = 40;
	 var o = d3.select("body").select("#one");
	 var s = o.append("svg")
	 		  .attr("width",width)
	 		  .attr("height",height);
	 //添加条形图
	 s.selectAll("rect").data(data).enter()
		  .append("rect")
		  .style("fill","gray")
		  .attr("y",function(d,i){ return y*i;})
		  .attr("height",20).transition()
		  .attr("width",function(d){ return d;});
	//为条形图顶部添加数据
	 s.selectAll("text").data(data).enter()
	 	 .append("text")
	 	 .text(function(d){ return d;})
	 	 .attr("y",function(d,i){ return y*i+15;})
	 	 .transition()
	 	 .attr("x",function(d){ return d;})
      </script>
   </body>
</html>
```
代码实际效果如下：
<iframe width = "310" height="250" scrolling="no" src="https://www.yidaimingjvn.xyz/test/1.html">
</iframe>

## 圆图
圆形图是圆形统计图形，它被分成切片以说明数字比例。
### 绘制圆图
思路如下：
1.创建svg图像容器。
2.用d3创建svg元素。
3.用d3中的enter方法创建图像容器。
4.用append方法在容器中添加图像。
5.设置图像效果。
6.用append方法在容器中添加数据文本,追加位置到圆图中心。

示例：

```html
<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <div id="one"></div>
      <script>
         var data=[20,45,67,89];
         var colors=["green","red","blue","gray"]
         var width = 700;
         var height = 400;
         var tt=0;
         var o = d3.select("body").select("#one");
         var s = o.append("svg").attr("width",width).attr("height",height);
         var g = s.selectAll("g").data(data).enter().append("g");
         //绘制圆图
         var c = g.append("circle")
         			.attr("cx",function(d,i){ return i*180+50;})
         			.attr("cy",100)
         			.data(colors).style("fill",function(b){return b;})
         			.data(data)
         			.transition()
         			.attr("r",function(d){ return d; });
         //为圆图添加文本
 	 	g.append("text").text(function(d){return d;})
 	         .attr("x",function(d,i){return i*180+40;})
 	         .attr("y",105);
      </script>
   </body>
</html>
```
代码实际效果如下：
<iframe width = "700" height="250" scrolling="no" src="https://www.yidaimingjvn.xyz/test/2.html">
</iframe>

## 饼图
饼图是将一个圆按比例分成若干份，能够帮助用户有效分析相关数据占比的一种图标。
- d3.arc（）
- d3.pie（）

这两种是方法是d3中用于绘制饼图的方法，可以有效地帮助用户快速绘制饼图。

### d3.arc()
d3.arc（）方法生成一个弧。 您需要为弧设置内半径和外半径。 如果内半径为0，则结果将为饼图，否则结果将为圆环图。
### d3.pie()
d3.pie（）方法用于生成饼图。 它从数据集中获取数据并计算饼图的每个楔形的起始角度和结束角度。

### 绘制饼图
思路如下：
1.创建数据集

2.创建svg元素

3.创建g元素容器

4.定义半径
(由容器的最短边长度作为直径，再乘以一个小数使直径比最短边短一点以确保容器能放下饼，再除以2得到半径)(获取容器最短边可以使用Math.min方法)

5.定义扇形的内半径，从而达到圆环效果。
(使用d3.arc的innerRadius方法)

6.计算饼图或圆环图中弧的开始和结束角度，并用原本的数据集生成为角度数据集。
(先使用value获取数据集中的数据部分,然后开始计算，计算开始和结束弧度使用d3.pie的startAngle方法和endAngle方法，可以加入padAngle方法来为各个扇形之间加入间隔。)

7.创建饼图的颜色比例尺
(使用d3.scaleOridinal方法，用domain和range创建，domain中的值为d3.range(0,数据集的长度(length))，range中获取的值为d3.schemeSet1中的值)

8.在容器g元素中添加新的容器g元素，容器中选择所有path元素，连接数据集db。以db的值为索引，用创建的颜色比例尺为饼图上色。以创建的半径为作为饼图的半径完成饼图绘制。

示例：

```html
<html>
 <head>
  <script src="d3/d3.js"></script>
 </head>
 <body>
  <div id="one">
  </div>
  <script>
  //创建数据集
   const Odata=[
				{"x":"xone","y":"123"},
				{"x":"xtwo","y":"12"},
				{"x":"xthree","y":"23"},
				{"x":"xfour","y":"163"},
				{"x":"xfive","y":"173"},
				{"x":"xsix","y":"136"},
				{"x":"xseven","y":"143"},
				{"x":"xeight","y":"223"}
    			];
  //创建svg元素
  const [width,height]=[400,500];
  let s = d3.selectAll("body").select("#one")
             .append("svg")
			 .attr("width",width)
			 .attr("height",height);
  //创建容器g元素
  let g = s.append("g");
  //定义半径
  let radius=Math.min(width,height)*0.8/2
  //定义扇形内半径
  let a = d3.arc()
  			.innerRadius(70);
  //计算扇形开始和结束角度，并生成数据集。
  let db = d3.pie()
  			 .value(
			 		function(d){
							return d.y;
					}
			 )
			 .startAngle(0)
			 .endAngle(Math.PI*2)
			 .padAngle(0.05)(Odata);
  //创建颜色比例尺
  let color=d3.scaleOrdinal()
  			   .domain(d3.range(0,Odata.length))
			   .range(d3.schemeSet1)
  //绘制饼图
  g.append("g")
  	.attr("transform","translate"+"("+radius+","+radius+")")
	.selectAll("path")
	.data(db)
	.enter()
	.append("path")
	.attr("fill",
				  function(d){
				  			return color(d.index);
				  }
	)
	.attr("d",
			   function(d){
						d.outerRadius=radius;
			   			return a(d);
			   }
	);
  </script>
 </body>
</html>
```
代码实际效果如下：
<iframe width = "350" height="350" scrolling="no" src="https://www.yidaimingjvn.xyz/test/3.html">
</iframe>

D3.js绘制图表

d3.js对数组的操作

D3.js的转换

一代明君

Comments | NOTHING