初探ML非线性图

酒城译痴无心剑

已于 2024-11-20 15:58:53 修改

阅读量767

点赞数 10

CC 4.0 BY-SA版权

分类专栏：漫游编程世界文章标签：非线性图二次曲线螺线指数曲线对数曲线三角曲线

于 2024-11-20 13:55:06 首次发布

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/143908726

漫游编程世界专栏收录该内容

34 篇文章

订阅专栏

文章目录

1. 非线性图
2. 绘制椭圆
- 2.1 椭圆方程
- 2.2 绘制椭圆
3. 绘制阿基米德螺线
- 3.1 阿基米德螺线的方程
- 3.2 绘制阿基米德螺线

1. 非线性图

非线性图指的是不遵循线性关系的图表，它们通常用来展示变量间的复杂关系。这些图表可以是曲线、散点图或其他形状，如指数、对数、多项式等，反映了数据点之间的非直线型关联。在数据分析和可视化中，非线性图有助于揭示数据的深层次模式和趋势。

2. 绘制椭圆

2.1 椭圆方程

椭圆的一般方程可以表示为 $\displaystyle \frac{x^2}{a^2} + \frac{y^2}{b^2} = 1$ ，其中 $a$ 和 $b$ 分别是椭圆在 $x$ 轴和 $y$ 轴上的半轴长度。为了在 Plotly 中绘制椭圆，我们可以生成一系列 $x$ 和 $y$ 的值，然后使用这些值来定义椭圆的轮廓。
椭圆的参数方程是一组可以用来描述椭圆上任意一点位置的方程，它们通常以参数 $t$ （通常是角度）来表示。对于一个以原点为中心，长半轴为 $a$ ，短半轴为 $b$ 的椭圆，其参数方程如下：
$\cos(t)$
$\sin(t)$
其中， $t$ 的取值范围是从 $0$ 到 $2\pi$ ，这样 $t$ 就会随着参数方程的运行遍历整个椭圆。

2.2 绘制椭圆

创建网页 - ellipse.html
编写网页代码和脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>椭圆演示</title>
		<script src="scripts/plotly-basic.min.js"></script> 
	</head>
	<body>
		<div id="myPlot" style="width:750px;height:750px;"></div>

		<script>
			// 定义椭圆的半轴长度
			let a = 5; // x轴的半轴长度
			let b = 3; // y轴的半轴长度
			const tValues = []; // 定义参数t的数组，用于参数化椭圆
			const xValues = []; // 定义x值数组
			const yValues = []; // 定义y值数组
			
			// 生成椭圆的参数方程值
			for (let t = 0; t <= 2 * Math.PI; t += 0.01) {
			  tValues.push(t); // 将参数t添加到t值数组
			  xValues.push(a * Math.cos(t)); // 将a * cos(t)值添加到x值数组
			  yValues.push(b * Math.sin(t)); // 将b * sin(t)值添加到y值数组
			}
			
			// 定义数据
			const data = [{
			  x: xValues, // x值数组
			  y: yValues, // y值数组
			  type: "scatter", // 模式设置为散点
			  fill: "toself", // 填充椭圆内部
			  line: {color: 'rgba(0, 100, 200, 0.5)'} // 椭圆边缘线颜色
			}];
			
			// 定义布局
			const layout = {
			  title: "椭圆演示", // 设置图表标题
			  showlegend: false // 不显示图例
			};
			
			// 使用Plotly显示图表
			Plotly.newPlot("myPlot", data, layout); // 在id为"myPlot"的元素中绘制椭圆
		</script>
	</body>
</html>

在这段代码中，我们使用参数 $t$ 来生成椭圆的 $x$ 和 $y$ 值，其中 $t$ 的范围是从 $0$ 到 $2\pi$ 。我们使用 Math.cos(t) 和 Math.sin(t) 来计算椭圆的参数方程，并将这些值添加到 xValues 和 yValues 数组中。最后，我们使用 Plotly.newPlot 函数在网页上绘制椭圆。fill: "toself" 属性用于填充椭圆的内部，而 line 属性用于设置椭圆边缘线的颜色。
浏览网页，查看效果

3. 绘制阿基米德螺线

3.1 阿基米德螺线的方程

阿基米德螺线（Archimedean Spiral）是一种由古希腊数学家阿基米德所描述的螺旋线。
极坐标方程： $b\theta$ ，其中， $r$ 是从原点到螺旋线的距离， $\theta$ 是从正x轴开始的角度（以弧度为单位）， $a$ 和 $b$ 是常数，决定了螺旋线的起始位置和间距。
要在网页上使用Plotly.js绘制阿基米德螺线，需要将极坐标方程转换为直角坐标系下的参数方程。
阿基米德螺线的直角坐标系参数方程
$b\theta) \cos(\theta)$
$b\theta) \sin(\theta)$

3.2 绘制阿基米德螺线

创建网页 - ellipse.html
编写网页代码和脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿基米德螺线演示</title>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>
	<body>
		<div id="myPlot" style="width:600px;height:600px;"></div>

		<script>
			const a = 0; // 起始常数
			const b = 0.1; // 间距常数
			const thetaValues = []; // 角度数组
			const xValues = []; // x值数组
			const yValues = []; // y值数组
			
			// 生成阿基米德螺线的值
			for (let theta = 0; theta <= 10; theta += 0.1) {
			  thetaValues.push(theta); // 将角度添加到角度数组
			  const r = a + b * theta; // 计算极径
			  xValues.push(r * Math.cos(theta)); // 计算x值
			  yValues.push(r * Math.sin(theta)); // 计算y值
			}
			
			// 定义数据
			const data = [{
			  x: xValues,
			  y: yValues,
			  mode: "lines",
			  line: {
				color: 'blue',
				width: 2
			  }
			}];
			
			// 定义布局
			const layout = {
			  title: "阿基米德螺线",
			  showlegend: false
			};
			
			// 使用Plotly显示图表
			Plotly.newPlot("myPlot", data, layout);
		</script>
	</body>
</html>