反应：将SVG线连接到API的点

Question

我正在尝试将线路连接到API中的点。我希望每条线随机连接一个点大约3次。到目前为止，我得到的线路连接到起点x＆amp; y点，但它只是绘制一条与x＆amp;值相同的直线。年。我遇到了很多麻烦所以请让我知道我需要做些什么来实现我的目标。

    <svg viewbox="0 0 1552 818">
     <g id="lines">
   {data.sites.map((item, i) => {
     let findX = (180 + item.attributes.address.Longitude) * (1552 / 360);
     let findY = (90 - item.attributes.address.Latitude) * (818/ 180);
       return (
          <path key={i + i + '--'} id={'line' + (i + 1)} class="cls-3" 
d={'M' + findX + ',' + findY + 'c0,0,0,0,' + findX + ',' + findY} />
                       )
                        })}
         </g>
         <g id="dots">
           {data.sites.map((item, i) => {
              let findX = (180 + item.attributes.address.Longitude) * (1552 / 360);
              let findY = (90 - item.attributes.address.Latitude) * (818/ 180);
               return (
                <circle key={i + i + '--'} id={'dot' + (i + 1)}  
class="cls-2" cx={findX} cy={findY} 
                 r={
          item.attributes.Site_Catagories === 'VCP Core' ||
          item.attributes.Site_Catagories === 'VCP Lab' ? 
              "5" : "3"
                    } 
         alt={item.attributes.title} fill='white' strokeWidth='2'
         stroke={
            item.attributes.Site_Catagories === 'VCP Core' ||
            item.attributes.Site_Catagories === 'VCP Lab' ? 
               "black" : "#20cbd3"
                                } 
                                />
                               )
                        })}
                      </g>
      </svg>