、非重複エンドポイント間の曲線を描く

Question

は、私は、静的なデータで作成したサンプルのため、このFiddleを参照してください。 （例：C）。私はこれを構築するためにsvgとパスを使用しています。私がフィドルの中に持っているのは、ちょうど1つの終点のためのものです。同様に私は約20エンドポイントを持っています。アイデアは、添付された画像のようにエンドポイント間に重ならないカーブを描くことです。

<div class="c1"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="711px" viewBox="0 0 1000 711"> 
     <style type="text/css" > 
      <![CDATA[ 
      path { 
       stroke: #17479e; 
       fill: none; 
       stroke-width: 3; 
       opacity:0.7; 
      } 
      path.ar4 { 
       stroke-width: 3; 
      } 
      path.ar5 { 
       stroke-width: 5; 
      } 
      path.ar6 { 
       stroke-width: 6; 
      } 
      path.ar7 { 
       stroke-width: 7; 
      } 
      path.ar { 
       fill: #17479e; 
       stroke-width:0; 
       opacity:1; 
      } 
      ]]> 
     </style> 
     <defs> 
     <marker id="ah1" orient="auto" markerWidth="2" markerHeight="4" refX="0.1" refY="2"> 
      <path class="ar" d="M0,0 V4 L2,2 Z"/> 
     </marker> 
     </defs> 
     <path id="map_1_3" d="M570,315 C469,323 343,364 268,422" marker-end="url(#ah1)" class="ar5"/> 
     <path id="map_1_4" d="M256,379 C259,374 226,396 268,422" marker-end="url(#ah1)" class="ar7"/> 
     <path id="map_1_5" d="M285,454 C269,443 269,438 268,422" marker-end="url(#ah1)" class="ar4"/> 
     <path id="map_1_6" d="M387,514 C351,448 299,421 268,422" marker-end="url(#ah1)" class="ar4"/> 
    </svg> 
    </div> 

だから、私は統計学的にやっている方法は、（もちろん、時間の制約がすべての座標のために定義する）間違っている感じのようなHTMLが見えます。だから私はこれを動的に行うことを考えています。配列の終点を与えると、関数はカーブを描画する必要があります。

私はPHPを使用しています。誰かが既にこの種のカーブを生成するためのアルゴリズムを知っていれば、助けてください。

Answer 1

最初の方法として、ベジェキュービックを試すことができます。コントロールポイントの場合、結合する2つの中心と、固定形状の台形を形成する2つの中間点を取ります。必要に応じて拡大/縮小/回転します。

は、曲線が交差しないという完全な保証はありませんが、これはまれである必要があります。