在端点之间绘制不重叠的曲线

Question

In my application I need to draw some curves between some set of coordinates like this

Refer this Fiddle for the sample I created by static data. (For. ex: C). I'm using svg and path to construct this. The one I have in the fiddle is just for one end point. Similarly I have around 20 end points. The idea is to draw a non overlapping curve between the end points like the attached picture. The html looks like

<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>

So, I feel the way I'm statistically doing is wrong (of course, the time constraint to define for all the coordinates). So I'm thinking of doing this dynamically. If I give the end points in an array, the function should draw the curves.

I'm using PHP. If anyone already know any algorithm to generate this kind of curves please help.

Answer 1

As a first approach, you can try with Bezier cubics. For the control points, you will take the two centers to be joined, and two intermediate points forming a trapezoid of fixed shape. Scale and rotate as required.

There is no full guarantee that the curves will not cross, but this should be rare.