javascript - 查找三次贝塞尔曲线上给定点的系数/函数

Question

我正在根据此信息图创建一个简单的 d3 图:http://bit.ly/1o4iGfK

我现在要重现的是每个“节点”之间的立方贝塞尔线。
多亏了这个website，我画了一条曲线.所以我知道每四个点的 x 和 y 坐标:
(x0, y0) = (32, 45);
(x1, y1) = (32, 150);
(x2, y2) = (190, 150);
(x3 , y3) = (190,260);

但我真的不知道如何使用常见的算法，将其转置为javascript函数，这样我只能写出已知的(x0，y0)和(x3，y3)坐标，pouf!得到一条漂亮的线。
主要是因为我不太擅长代数。对不起。

我找到了这个线程:here
这似乎是答案的一部分，但是，好吧，我不完全理解代码和解释。

现在我使用了这个功能:

function linkArc(d) {
            var dx = d.source.x - d.target.x,
                dy = d.source.y - d.target.y,
                dr = Math.sqrt(dx * dx + dy * dy);

            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + "    0    0,1 " + d.target.x + "," + d.target.y;
        }

这是一个简单的弧线，并不是我真正想要的。
(d.source.x , d.target.y) : 第一个点的坐标 (x0,y0)
(d.target.x , d.target.y) : 终点坐标 (x3, y3)

谢谢。

Answer 1

您想要的是端点处的垂直坡度。由于内部控制点决定坡度，因此您必须将它们直接设置在控制点的上方和下方。上下多少有两个自由度。比如把它们放在高度差的三分之一处

x1 = x0;  y1 = (2*y0+y3)/3;
x2 = x3;  y2 = (2*y3+y0)/3;

---

总体方案是

y1 = (a*y0+b*y3)/(a+b);
y2 = (a*y3+b*y0)/(a+b);

在哪里

y1-y0 = b/(a+b)*(y3-y0)

因此 b/(a+b) 是第一个控制点在第零个端点上方的高度分数。

---

所以要得到 2/3 的分数而不是上面的 1/3，使用 a=1 和 b=2 得到

y1=(y0+2*y3)/3;
y2=(y3+2*y0)/3;