Bir SVG eğrisini bir polinomaya sığdırın

Question

x² veya 2x + 3x² gibi fonksiyonlara sahip olduğumu varsayarsak, bu işlevlere uyan bir SVG yolu oluşturma hakkında neler giderim? SVG ve Bezier eğrilerinin benim sınırlı anlayış

ben için arıyorum çıkan grafik ise belirtilen fonksiyonu uyar sağlayacaktır bezier kontrol noktalarını oluşturmak için basit bir tekniktir inanıyoruz. Grafik programlamasında yeni bir kullanıcı olduğumu (önceden tahmin edemezseniz) güvenle varsayabilirsin. gnuplot gibi çerçevelerin bu tür bir enterpolasyonu gerçekleştirebildiğini biliyorum ancak SVG ve JavaScript'u kullanarak el ile nasıl yapacağınıza dair bir açıklama için daha fazla arıyorum.

DÜZENLEME: Kesin bir uyum sıkı bir gereklilik değildir, ancak sonuçta elde edilen grafik makul ölçüde doğru olmalıdır (öğretim amacıyla).

Answer 1

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

SVG Kuvadratik ve kübik polinomları için yeterli olmalıdır emir 2 ve 3, bir Bezier eğrileri içerir.

<!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" /> 

Al Y = x² - bitiş noktaları ile 4, (-3, 5) ve (3, 5); teğetler y = -6x - 13 ve y = 6x - 13'dir. Her iki teğet üzerindeki bir Q kontrol noktasını (0, -13). Bu herhangi bir kuadratik için kolayca çalışmalıdır.

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

Kübikler biraz tıkıştırıcıdır. Y = (x³ - 9x)/16 (-5, -5) ila (5, 5) arasında, teğetler y = (33x + 125)/8 ve y = (33x - 125)/8'dir. eğri (0, 0) -9/16 eğiminden geçmelidir, C kontrol noktalarını (-5/3, 35/4) ve (5/3, 35/4) bulmak için basit bir hesaplamadır. Muhtemelen çoğu zaman el ile yapılabilir değil, ama bu yaklaşımın diğer küpler için sayısal olarak yapılabilmesi gerektiğini düşünüyorum - kontrol noktalarının her bir teğet boyunca ne kadar uzandığı ve belirli bir noktayı ve yönü zorlayan iki kısıtlama için iki değişken.

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

( Animated Bézier Curves Bunları dışarı çalışırken çok yardımcı oldu.) Eğer * tam * bir Bezier eğrisi ile polinomu tanımlamak eğer

</svg>