D3 or D3.js 代表 "Data Driven Documents"
select() 方法从文档中选择一个元素，它接收目标元素的名称作为参数并返回第一个匹配该名称 HTML 节点。举例：
const anchor = d3.select('a');
append()方法接收添加到文档中的元素，它会把该元素添加到一个选中的 HTML 节点，然后返回对该节点的引用。
text()方法可以设置被选中节点的文本也可以得到当前文本。若是设置文本，需要将字符串作为参数传递。
D3 允许方法的嵌套。
下面是一个选中无序列表，并添加一个 list 元素的方法：
d3.select("ul")
.append("li")
.text("very important")
使用 selectAll() 选中一组元素。它返回一个 HTML 节点数组。
下面是一个选中所有超链接元素的例子：
const anchors = d3.selectAll("a");
例子：
d3.selectAll("li")
.text("list item")
首先使用 data() 方法去选择 DOM 元素来和数据联系在一起。数据集作为参数传给该方法。
使用 enter() 方法为数据集中每一块元素创建一个新的 DOM 元素。
下面的例子是选择 ul 元素并根据数组创建列表。
const dataset = ["a", "b", "c"];
d3.select("ul").selectAll("li")
.data(dataset)
.enter()
.append("li")
.text("New Item");
text() 方法可以接收字符串或者回调函数作为参数。
selection.text((d) => d)
在上面的这个方法中，参数 d 指的是该数据集的一个入口。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
// Add your code below this line
.text((d) => d + " USD");
// Add your code above this line
</script>
</body>
/*
12 USD
31 USD
22 USD
17 USD
25 USD
18 USD
29 USD
14 USD
9 USD
*/
使用 style() 各动态元素添加样式。该方法接收一个以逗号 , 分隔的键值对作为参数。
下面是一个把选中文本设置为蓝色的例子：
selection.style("color","blue");
设置选中字体：
d3.select("body")
.style("font-family","verdana");
在 style() 中同样可以使用回调函数来改动不同元素的样式。使用参数 d 来代表数据点。
下面的例子是把数据集中小于 20 的元素设置为红色，其它设置为绿色。
d3.selectAll("h2")
.style("color", (d) => {
if (d < 20) {
return "red";
} else return "green";
});
attr() 方法和 style() 方法类似，他接收以逗号分割的值，并且可以使用回调函数。
下面是一个给元素添加 container class 的例子。
selection.attr("class", "container");
结合上面所学创建一个条形图 (bar chart)。
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", (d) => d + "px");
</script>
</body>
<style>
.bar {
width: 25px;
height: 100px;
/* Add your code below this line */
marign: 2px;
/* Add your code above this line */
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", (d) => (d*10 + "px")) // Change this line
</script>
</body>
SVG 的全称是：Scalable Vector Graphics。
scalable 的意思是对物体放大或者缩小不会使物体马赛克（pixelated）。
SVG 在 HTML 中使用 svg 标签实现。
下面是一个创建 SVG 的例子：
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 1
00;
const svg = d3.select("body")
// Add your code below this line
svg.append("svg").attr("width",w).attr("height",h);
// Add your code above this line
</script>
</body>
SVG 支持多种数量的形状，例如：使用 <rect> 来表示矩形。
当把一个形状放入 SVG 区域时，可以设置 x，y 坐标系。原点（0,0）表示左上角。x 的正值会使图形向右移动，y 的正值向上移动。例如：把一个形状放在 500 宽，100 高的位置需要设置 x = 250，y = 50。
对于 <rect> 来说，它有四个属性，分别是高度、宽度和 x，y。该元素必须添加到 svg节点，而不是 body 节点。
下面的例子是设置一个矩形
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
svg.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
// Add your code above this line
</script>
</body>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
// Add your code below this line
.data(dataset)
.enter()
.append("rect")
// Add your code above this line
.attr("x", 0)
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
条形图的 y 坐标应该是一致的，而 x 坐标应该有所不同。通过设置 attr() 的回调函数来动态设置。回调函数接收两个参数，第一个用 d 代表数据点本身，第二个代表数据点在数组中的索引。格式：
selection.attr("property", (d,i) => {
})
注：不需要使用 for 或者 forEach() 循环。
下面是扩大 30 倍的例子：
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => {
// Add your code below this line
return i*30;
// Add your code above this line
})
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
实际上就是修改数据点
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", 0)
.attr("width", 25)
.attr("height", (d, i) => {
// Add your code below this line
return d * 3;
// Add your code above this line
});
</script>
</body>
y 坐标也就是 y = heightOfSVG - heightOfBar 会把 bar 置于右上侧。
一般公式：y = h - m * d，其中 m 是数据点 scale 的常量。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// Add your code below this line
return 100 - 3 * d;
// Add your code above this line
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
在 SVG 中，rect 形状使用 fill 来控制颜色。
下面设置颜色为海军蓝。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
// Add your code below this line
.attr("fill", "navy");
// Add your code above this line
</script>
</body>
使用 SVG 的 text 给元素加标签。该属性同样具有 x 和 y 属性。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
// Add your code below this line
.append("text")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d - 3)
.text((d, i) => d);
// Add your code above this line
</script>
<body>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3)
// Add your code below this line
.attr("fill","red")
.style("font-size", "25px")
// Add your code above this line
</script>
</body>
<style>
.bar:hover {
fill: brown;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy")
// Add your code below this line
.attr("class", "bar")
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3);
</script>
</body>
当用户 hover 在一个元素上，tooltip 可以展示更多的信息。
使用 SVG 的 title 给元素添加 tooltip。使用 title 配合 text() 方法给条动态添加数据。
下面是一个例子：
<style>
.bar:hover {
fill: brown;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy")
.attr("class", "bar")
// Add your code below this line
.append("title")
.text((d) => {
return d;
})
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
</script>
</body>
scatterplot 是另一种可视化的类型。它使用圆环来遍历数据点，每个数据点有两个值。这些值和 x、y 坐标绑定，用来定位圆环的位置。
SVG 的 circle 标签创建圆形。
下面是一个圆形的例子：
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
// Add your code below this line
.data(dataset)
.enter()
.append("circle");
// Add your code above this line
</script>
</body>
圆形主要有三个属性。cx 和 cy 属性是坐标系。r 属性规定圆形的半径。
这三个属性可以使用一个回调函数动态设置它们的值。记住，所有在 data(dataset) 链后的方法会对每个数据项运行一次。回调函数中的 d 表示当前数据集合中的数据项。可以使用括号表示法去得到数据集中的元素，如：d[0]。
下面是一个例子：
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
// Add your code below this line
.attr("cx", (d) => d[0])
.attr("cy", (d) => h - d[1])
.attr("r", 5)
// Add your code above this line
</script>
</body>
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d, i) => d[0])
.attr("cy", (d, i) => h - d[1])
.attr("r", 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
// Add your code below this line
.attr("x", (d) => d[0] + 5)
.attr("y", (d) => h - d[1])
.text((d) => (d[0] + ", " + d[1]))
// Add your code above this line
</script>
</body>
scales 是一种函数，可以把数据集的数据映射为 SVG 画布。
例子：
const scale = d3.scaleLinear();
默认情况，scale 使用实体关系。输入和输出的结果相同。
<body>
<script>
// Add your code below this line
const scale = d3.scaleLinear(); // Create the scale here
const output = scale(50); // Call scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
假如一个数据集范围从50 - 480，这是输入的范围，也叫 domain。
然后打算把这些数据点映射到 x 轴上，从 10 units 到 500 units，这就是输出的范围，也叫 range。
domian() 和 range() 方法为 scale 设置这些值。这两个方法接收一个至少包含两个元素数组作为参数。例如：
scale.domain([50, 480]);
scale.range([50, 480]);
scale(40);
d3.scaleLinear();
最小的 domain 是 50 映射到最小的 range 为 10。
例子：
<body>
<script>
// Add your code below this line
const scale = d3.scaleLinear();
scale.domain([250, 500]).range([10, 150]);
// Add your code above this line
const output = scale(50);
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
例子：
const exampleData = [3, 45, 10, 9];
d3.min(exampleData);
d3.max(exampleData);
有些时候数据集是嵌套的，这样的情况下，需要给这两个函数传入回调函数。这时，参数 d 代表当前内部的数组。
const locationData = [[1, 7],[6, 3],[8, 3]];
const minX = d3.min(locationData, (d) => d[0]);
// minX = 1;
<body>
<script>
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
// Add your code below this line
const output = d3.max(positionData, (d) => d[2]); // Change this line
// Add your code above this line
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
// output = 8;
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 60;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d[0]))
.attr("cy", (d) => yScale(d[1]))
.attr("r", 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => (d[0] + ", " + d[1]))
.attr("x", (d) => xScale(d[0] + 10))
.attr("y", (d) => yScale(d[1]));
</script>
</body>
axisLeft() 和 axisBottom() 方法，去渲染 x 轴和 y 轴，相对的，根据 xScale 创建 xAxis
const xAxis = d3.axisBottom(xScale);
下一步就是渲染
svg.append("g")
.attr("transform", "translate(0, " + (h - padding) + ")")
.call(xAxis);
目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称
写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c
TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是
TCP是面向连接的协议，连接的建立和释放是每一次面向连接的通信中必不可少的过程。TCP连接的管理就是使连接的建立和释放都能正常地进行。三次握手TCP连接的建立—三次握手建立TCP连接①若主机A中运行了一个客户进程，当它需要主机B的服务时，就发起TCP连接请求，并在所发送的分段中用SYN=1表示连接请求，并产生一个随机发送序号x，如果连接成功，A将以x作为其发送序号的初始值：seq=x。主机B收到A的连接请求报文，就完成了第一次握手。客户端发送SYN=1表示连接请求客户端发送一个随机发送序号x，如果连接成功，A将以x作为其发送序号的初始值：seq=x②主机B如果同意建立连接，则向主机A发送确认报
VXLAN简介定义RFC定义了VLAN扩展方案VXLAN（VirtualeXtensibleLocalAreaNetwork，虚拟扩展局域网）。VXLAN采用MACinUDP（UserDatagramProtocol）封装方式，是NVO3（NetworkVirtualizationoverLayer3）中的一种网络虚拟化技术。目的随着网络技术的发展，云计算凭借其在系统利用率高、人力/管理成本低、灵活性/可扩展性强等方面表现出的优势，已经成为目前企业IT建设的新趋势。而服务器虚拟化作为云计算的核心技术之一，得到了越来越多的应用。服务器虚拟化技术的广泛部署，极大地增加了数据中心的计算密度；同时，为
目录一、原理部分1、什么是串行通信（1）并行通信与串行通信（2）串行通信的制式（3）串行通信的主要方式 2、配置串口（1）SCON和PCON：串行口1的控制寄存器（2）SBUF：串行口数据缓冲寄存器 （3）AUXR：辅助寄存器编辑（4）ES、PS：与串行口1中断相关的寄存器（5）波特率设置 3、串口框架编写二、程序案例一、原理部分1、什么是串行通信（1）并行通信与串行通信微控制器与外部设备的数据通信，根据连线结构和传送方式的不同，可以分为两种：并行通信和串行通信。并行通信：数据的各位同时发送与接收，每个数据位使用一条导线，这种方式传输快，但是需要多条导线进行信号传输。串行通信：数据一位一
这篇文章，主要介绍如何使用SpringCloud微服务组件从0到1搭建一个微服务工程。目录一、从0到1搭建微服务工程1.1、基础环境说明（1）使用组件（2）微服务依赖1.2、搭建注册中心（1）引入依赖（2）配置文件（3）启动类1.3、搭建配置中心（1）引入依赖（2）配置文件（3）启动类1.4、搭建API网关（1）引入依赖（2）配置文件（3）启动类1.5、搭建服务提供者（1）引入依赖（2）配置文件（3）启动类1.6、搭建服务消费者（1）引入依赖（2）配置文件（3）启动类1.7、运行测试一、从0到1搭建微服务工程1.1、基础环境说明（1）使用组件这里主要是使用的SpringCloudNetflix
目录文章信息写在前面Background&MotivationMethodDCNV2DCNV3模型架构Experiment分类检测文章信息Title：InternImage:ExploringLarge-ScaleVisionFoundationModelswithDeformableConvolutionsPaperLink：https://arxiv.org/abs/2211.05778CodeLink：https://github.com/OpenGVLab/InternImage写在前面拿到文章之后先看了一眼在ImageNet1k上的结果，确实很高，超越了同等大小下的VAN、RepLK
文章目录前言一、注册小程序二、项目创建三、运行项目四、其他配置最后前言此次项目开发使用uniapp和uview进行开发，需要用到的开发工具为HBuilderX和微信开发者工具，具体的安装方式见官网，小程序注册见微信公众平台。一、注册小程序注册在微信公众平台注册小程序，按照提示注册完后会发配一个appid和密钥，需要复制保存好。完善信息设置=>基本设置，填写小程序基本信息，包括名称、头像、介绍及服务范围等。第三方设置根据开发需求添加插件授权。成员管理管理=>成员管理，点击编辑或下拉选择添加成员，输入微信号添加新的项目成员，只有成员可以进行真机测试。体验成员可以使用发布的体验版。开发设置开发=>开
ESP32学习笔记(七)复位和时钟目录:ESP32学习笔记(一)芯片型号介绍ESP32学习笔记(二)开发环境搭建VSCode+platformioESP32学习笔记(三)硬件资源介绍ESP32学习笔记(四)串口通信ESP32学习笔记(五)外部中断ESP32学习笔记(六)定时器ESP32学习笔记(七)复位和时钟1.复位2.系统时钟2.1时钟树2.2时钟源从时钟树可以看出时钟源共七种ESP32的时钟源分别来自外部晶振、内部PLL或振荡电路具体地说，这些时钟源为：2.2.1快速时钟PLL_CLK320MHz或480MHz内部PLL时钟XTL_CLK2~40MHz外部晶振时钟，模组板载的是40MHz晶