Question

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

我现在想要重现的是我的每个节点之间的立方贝塞尔线＆＃34;。
由于这个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）是第一个控制点高于第0个端点的高度分数。

所以要获得2/3的一小部分而不是上面的1/3，使用a = 1和b = 2来获得

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

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

1 个答案: