svgは2点の間に点線のベルカーブを描きます

Question

私はベルカーブを描画したいと思います。だから本質的に私はx1、x2、heightという3つのパラメータを渡すことができ、破線のベルカーブを描くはずです。これを達成する最良の方法は何ですか？ここで

私は通常のベジェ曲線を描くために持っているものです。あなたが鐘を近似曲線を取得するには次曲線を使用することができます

function getDimension(x1, x2, height) { 
    return "M" + x1 + "," + height + " C" + x1 + ",0 " + x2 + ",0 " + x2 + "," + height; 
} 

var curve = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
curve.setAttribute("d", getDimension(0, 100, 50)); 
curve.setAttribute("x", '0'); 
curve.setAttribute("fill", 'none'); 
curve.setAttribute("stroke", 'black'); 
curve.setAttribute("stroke-dasharray", '5'); 
document.getElementById('svg').appendChild(curve); 

Answer 1

：基本的に私はベル曲線に変換する方法を見つけ出す必要があります。キュービック曲線はSVGでCを使用して描画されます。

function bellCurve(x1, x2, height) 
 
{ 
 
    var width = x2-x1; 
 
    var quart = width/4; 
 
    
 
    return `M0 ${height} C ${quart} ${height}, ${quart} 0, ${quart*2} 0, ${quart*3} 0, ${quart*3} ${height}, ${quart*4} ${height}`; 
 
} 
 

 
var curve = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
curve.setAttribute("d", bellCurve(0, 100, 50)); 
 
curve.setAttribute("x", '0'); 
 
curve.setAttribute("fill", 'none'); 
 
curve.setAttribute("stroke", 'black'); 
 
curve.setAttribute("stroke-dasharray", '5'); 
 
document.getElementById('svg').appendChild(curve);

<svg id="svg" />

あなたが移動/より正確ベル曲線に一致するようにハンドルを追加することもできます。また、必要に応じてテンプレートリテラルを文字列連結に置き換えることもできます。