多項式にSVG曲線をフィット

Question

私はx²または2x +3x²のような関数を持っていると仮定して、これらの関数に適合するSVGパスを作成する方法はありますか？私は私が を探しています信じてSVGとベジェ曲線の私の限られた理解から

は、得られたグラフが与えられた機能に適合していることを確認しますベジェコントロールポイントを構築するための簡単なテクニックです。私がグラフィックスプログラミングの初心者であることは、あなたがすでに推測していないならば、安全に仮定することができます。私はgnuplotのようなフレームワークがこのタイプの補間を行うことができることを知っていますが、私は手でそれを行う方法の詳細については、SVGとJavaScriptを使ってもっと探しています。

EDIT：正確な適合は厳密な要件ではないが、結果として得られるグラフは、（教育目的のために）適度に正確でなければなりません。

Answer 1

<?xml version="1.0" standalone="no"?> 

SVGは、2次および3次多項式に十分に適した2次および3次のベジェ曲線を提供します。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="20cm" height="20cm" viewBox="0 0 1000 1000" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <style type="text/css"><![CDATA[ 
    .axis { fill: none; stroke: black; stroke-width: 3; } 
    .tick { fill: none; stroke: black; stroke-width: 1; } 
    .fun1 { fill: none; stroke: blue; stroke-width: 2; } 
    .fun2 { fill: none; stroke: red; stroke-width: 2; } 
    ]]></style> 
    <polyline class="axis" points="0,500 1000,500" /> 
    <polyline class="tick" points="0,490 0,510" /> 
    <polyline class="tick" points="100,490 100,510" /> 
    <polyline class="tick" points="200,490 200,510" /> 
    <polyline class="tick" points="300,490 300,510" /> 
    <polyline class="tick" points="400,490 400,510" /> 
    <polyline class="tick" points="600,490 600,510" /> 
    <polyline class="tick" points="700,490 700,510" /> 
    <polyline class="tick" points="800,490 800,510" /> 
    <polyline class="tick" points="900,490 900,510" /> 
    <polyline class="tick" points="1000,490 1000,510" /> 
    <polyline class="axis" points="500,0 500,1000" /> 
    <polyline class="tick" points="490,0 510,0" /> 
    <polyline class="tick" points="490,100 510,100" /> 
    <polyline class="tick" points="490,200 510,200" /> 
    <polyline class="tick" points="490,300 510,300" /> 
    <polyline class="tick" points="490,400 510,400" /> 
    <polyline class="tick" points="490,600 510,600" /> 
    <polyline class="tick" points="490,700 510,700" /> 
    <polyline class="tick" points="490,800 510,800" /> 
    <polyline class="tick" points="490,900 510,900" /> 
    <polyline class="tick" points="490,1000 510,1000" /> 

エンドポイント（-3,5）および（3,5）でy =x² - 4とする。接線はy = -6x-13、y = 6x-13です。両方の接線上に1つの制御点を（0、-13）にします。これは任意の二次関数に対して簡単に動作するはずです。

<path class="fun1" d="M200,0 Q500,1800 800,0" /> 

キュービックは少しトリッキーです。 （-5、-5）から（5,5）までのy =（x3 - 9x）/ 16の場合、接線はy =（33x + 125）/ 8、y =（33x - 125）/ 8です。曲線は-9/16のスロープで（0、0）を通過しなければなりません。C制御点（-5/3,35/4）と（5/3,35/4）を見つけるための簡単な計算です。ほとんどの場合、おそらく手で行うことはできませんが、このアプローチは、制御点がどれほど接線に沿ってどれほど離れているか、そして特定の点と方向を強制する2つの制約の他の3次変数に対して数値的に実行可能でなければならないと思います。

<path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" /> 

（私はこれらを働いていたときAnimated Bézier Curvesはとても役に立ちました。）

</svg>