D3.js補間を「基準」として設定した線生成関数によって生成された曲線があります。問題は、生成された線が、線生成関数に指定された最初と最後の点にのみ接触し、その間の点を通過しないことです。これらが曲線を生成するための制御点として扱われることは承知していますb-splineが、私が探しているのは、曲線がパス配列のすべての点を通過するように制御点を「投影」/計算する方法です。
私のアプリケーションのポイント間のこれらは、ユーザーがドラッグして曲線を操作できる「ハンドル」ポイントです。補間を「カーディナル」に設定すると、曲線はすべてのポイントを通過しますが、これは私が望むタイプの曲線ではありません。「基本」補間によって生成されるより滑らかな曲線が必要です。
これが私のラインジェネレーターコードです：
this.lineGenerator = d3.svg.line()
.tension(0.5)
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
そして、これが問題を説明する写真です。
言い換えれば、私が持っている 3 つのポイントは、曲線の開始点と終了点、および「頂点」の点です (それが何と呼ばれているかはわかりませんが、曲線の「最も高い」点です)。 . したがって、図では、赤い点が頂点を表し、曲線はこの点を通過する必要があります。
この同じ問題を扱っているこの質問を見つけましたが、D3.js ではなく HTML 5 Canvas を使用しています。曲線の制御点を計算するためにここに示す式を適用しようとしましたが、最終的には次の結果になりました。
「ドラッグ ポイント」(赤い点) は曲線上ではなく下にあり、曲線をさらに外側にドラッグすると、点と曲線の間の距離が大きくなります。リンクされた質問の式が機能しなかった理由は、D3 曲線の式が であり、その質問で言及されているb-splineによって生成された曲線とは異なるためだと推測します。quadraticCurveTo(私はこれについて間違っているかもしれません...関連する数学について私が知っていることは危険です!)
私の質問は次のとおりD3です。「ベース」補間によって生成された曲線の式を知っている人はいますか? そして、私がリンクした質問で行われているのと同様に、曲線のコントロールポイントを計算するための式を導き出すのを手伝ってくれる人はいますか?