用于从D3“基础”曲线上的三个已知点计算控制点的公式

Question

我有一条D3.js线生成函数生成的曲线，插值设置为“基础”。问题是生成的线只触及给予线生成函数的第一个和最后一个点，而不是通过它们之间的那个。我知道这些被视为控制点以生成b-spline曲线，但我正在寻找的是一种“投射”/计算控制点的方法，以便曲线确实通过每个< / em>指向我的路径数组。

我的应用程序中的这些点之间是“处理”点，用户可以拖动这些点来操纵曲线。如果我将插值设置为“基数”，则曲线会经过每个点，但这不是我想要的曲线类型，我希望“基础”插值产生更平滑的曲线。

这是我的行生成器代码：

 this.lineGenerator =  d3.svg.line()
                             .tension(0.5)
                             .x(function(d) { return d.x; })
                             .y(function(d) { return d.y; })
                             .interpolate("basis");

这是一张说明问题的图片。

换句话说，我得到的三点是曲线起点和终点的点和“顶点”的点（不知道它叫什么......但是“最高”点是曲线）。所以在图中，红点代表顶点，曲线必须在这一点上运行。

我发现this question处理同样的问题，但使用HTML 5 Canvas而不是D3.js.我尝试应用此处给出的公式来计算曲线的控制点，但最终得到了这个结果：

“拖动点”（红点）现在低于曲线而不是曲线，点和曲线之间的距离随着曲线被进一步拖出而增大。我推测，问题中的公式不起作用的原因是因为D3曲线的公式是b-spline，因此不同于该问题中提到的quadraticCurveTo生成的曲线。 （虽然我可能错了......我对所涉及的数学知识很危险！）

所以我的问题是：有没有人知道D3“基础”插值生成的曲线的公式？并且任何人都可以帮助推导计算曲线控制点的公式，类似于我链接的问题中所做的那样。