图表

交互式图表允许用户通过实时操作参数来探索数学函数。这创建了一个引人入胜的可视化来理解函数行为。

交互式函数参数

使用滑块创建具有可调参数的函数：

import { Slider, InteractivePoint } from '@wangyaoshen/locus-interaction';

// 正弦波的振幅滑块
const amplitudeSlider = new Slider({
  min: 0,
  max: 100,
  value: 50,
  onChange: (value) => {
    redrawFunction(x => value * Math.sin(x));
  },
});

// 频率控制
const frequencySlider = new Slider({
  min: 0.5,
  max: 5,
  value: 1,
  onChange: (freq) => {
    redrawFunction(x => 50 * Math.sin(freq * x));
  },
});

可拖动函数点

允许用户拖动定义函数的点：

// 通过三个点的二次函数
const points = [
  new InteractivePoint({ position: [-100, 50] }),
  new InteractivePoint({ position: [0, -50] }),
  new InteractivePoint({ position: [100, 50] }),
];

function updateQuadratic() {
  const [p1, p2, p3] = points.map(p => p.getPosition());
  // 通过三个点拟合二次函数 ax² + bx + c
  const coefficients = fitQuadratic(p1, p2, p3);
  drawQuadratic(coefficients);
}

points.forEach(p => p.onMove = updateQuadratic);

函数类型

多项式函数

// 线性：f(x) = mx + b
const linearPlot = (m: number, b: number) => (x: number) => m * x + b;

// 二次：f(x) = ax² + bx + c
const quadraticPlot = (a: number, b: number, c: number) =>
  (x: number) => a * x * x + b * x + c;

// 三次：f(x) = ax³ + bx² + cx + d
const cubicPlot = (a: number, b: number, c: number, d: number) =>
  (x: number) => a * x * x * x + b * x * x + c * x + d;

三角函数

// 带参数的正弦
const sinePlot = (amplitude: number, frequency: number, phase: number) =>
  (x: number) => amplitude * Math.sin(frequency * x + phase);

// 余弦
const cosinePlot = (amplitude: number, frequency: number, phase: number) =>
  (x: number) => amplitude * Math.cos(frequency * x + phase);

参数曲线

// 圆
const circleParametric = (radius: number, t: number) => [
  radius * Math.cos(t),
  radius * Math.sin(t),
];

// 利萨茹曲线
const lissajous = (a: number, b: number, delta: number, t: number) => [
  Math.sin(a * t + delta),
  Math.sin(b * t),
];

图表属性

属性	类型	描述
domain	[number, number]	x 轴范围
range	[number, number]	y 轴范围
samples	number	采样点数
color	string	线条颜色
lineWidth	number	线条宽度