在知道点和梯度的情况下绘制曲线的切线

Question

我编写了一个计算机程序来支持我的微积分知识。可以看网页here

接下来我要做的是在用户将鼠标悬停在曲线上时显示曲线的切线。

当这种情况发生时，我确切地知道鼠标的坐标，我可以得到导数，在这种情况下是 2x -2 所以如果点在 (1, 1) 那么梯度就是 0。

如果我是用笔和纸画的，那么我会将方程重新排列为 y2-y1 = m(x2 -x1)。

虽然我不完全确定如何使用代码来做到这一点。

我尝试获取 y 截距和 x 截距，但切线看起来不对：

function getYIntercept(vertex, slope) {
  return vertex.y - (slope * vertex.x);
}

const yIntercept = getYIntercept(point, gradient);
const xIntercept =  - yIntercept / (gradient);

g.append('line')
    .style('stroke', 'red')
    .attr('class', 'tangent')
    .attr('x1', xScale(point.x))
    .attr('y1', yScale(point.y))
    .attr('x2', xScale(xIntercept))
    .attr('y2', yScale(yIntercept));
};

根据我掌握的信息，我如何更好地绘制这条线？

Answer 1

寻找切线

• 让我们从函数 f(x) 开始。
• 计算 f '(x)（导数）以供将来参考。
• 然后用户指出某个点(x1, y1)。
• 使用f '(x)，此时的斜率为m = f '(x1)。
• 利用点斜率公式，切线方程为y-y1 = m(x-x1)
• 求解y：
  • y = m(x-x1)+y1

---

寻找拦截

对于 x 和 y 截距[这里分别表示为 x0 和 y0]，只需使用正切方程即可。注意截距是 (x0,0) 和 (0,y0) 可能很有用，因此为正确的变量插入零可以让您找到截距。

• 求 y 截距，所以 x=0
• 因此 y = m(0-x1)+y1
• 分配m叶y = -m*x1+y1
• 所以 y0 = -m*x1+y1 并且 y 截距是 ( 0, -m*x1+y1 )

这就是绘制切线所需的全部内容。但如果您也对 x 截距感到好奇。

• 求 x 截距，所以 y=0
• 因此 0 = m(x-x1)+y1
• 分布m叶0 = m*x - m*x1 + y1
• 减去 x1 和 y1 项得到 m*x1-y1 = m*x
• 现在除以 m 使得 [ m*x1-y1 ]/m = x
• 所以 x0 = [ m*x1-y1 ]/m 并且 x 截距是 ( [ m*x1-y1 ]/m, 0 )

---

本案例的具体情况

这里有一些问题：

• (1, 1) 不是函数 f(x) = x^2 - 2*x + 1 上的一个点
  • 要解决这个问题，您可以只使用用户悬停点的 x 值
  • 或者，您可以考虑绘制slope field
• x 截距和 y 截距是两个不同的点，而不是一个点的 x 和 y 值

一旦这些问题得到解决，您将能够正确绘制任何已知一阶导数的函数的正切图！