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

Question

我正在基于这个信息图创建一个简单的d3图： http ： //bit.ly/1o4iGfK

我现在想要重现的是我的每个“节点”之间的立方贝塞尔线。
由于这个网站，我画了一条曲线。 所以我知道每四个点的x和y坐标：
（x0，y0）=（32,45）;
（x1，y1）=（32,150）;
（x2，y2）=（190,150）;
（x3，y3）=（190,260）;

但我真的不知道如何使用常用算法，并将其转换为javascript函数，以便我只能编写已知的（x0，y0）和（x3，y3）坐标，以及pouf！ 得到一个漂亮的线。
主要是因为我对代数不是很好。 抱歉。

我找到了这个帖子： 这里
它似乎是答案的一部分，但是，我并不完全理解代码和说明。

现在我已经使用了这个功能：

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;