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;