ある要素から別の要素に線を引く方法

Question

私は構造のような木を作成しています。私はhtmlバッジを使って数字をサークル内に作成しました。今は、ある要素から別の要素に線を引いてみたい。対角線と右斜めのような画像を使ってみました。しかし、それは動作していません。

これは、バッジを作成するための私のhtmlです：

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<span id="0" class="cl w3-badge">0</span><br><br><br><br> 
<span id="1" class="cl w3-badge">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<span id="2" class="cl w3-badge">0</span> 

これは私のjavascriptです：

var data = []; 
data.push(5); 
data.push(6); 
data.push(4); 
$('.w3-badge').each(function(i, obj) { 
document.getElementById(i).innerHTML = data[i]; 
}); 

This is image of left line

誰かが私を助けることはできますか？

私は私の最後の木は、このようになり取得しようとしている：SVGを使って Final tree

Answer 1

、実物のそれらの種類のための最良の選択肢である、 私はあなたが必要な正確に何をすべきか、以下の機能を書きました。 あなたはあなたのニーズにそれを書き換えることができます。
フルページを使用して結果を確認してください。

function drawLine(div1, div2){ 
 
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
 
svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
var div1Offset = div1[0].getBoundingClientRect(); 
 
var div2Offset = div2[0].getBoundingClientRect(); 
 
      var pathNr = ""; 
 
      pathNr = "M"+ (div1Offset.width + div1Offset.left)+ " " + ((div1Offset.top + div1Offset.height)/2) 
 
      pathNr += "h" +(div2Offset.left) 
 
      pathNr += "v" +(div2Offset.top) 
 
      pathNr += "h" +(-div2Offset.left) 
 
      svgPath.setAttribute("d", pathNr); 
 
      svgPath.setAttribute("stroke", "red"); 
 
      svgPath.setAttribute("stroke-width", "1"); 
 
      svgPath.setAttribute("fill", "white"); 
 
      svgPath.setAttribute("id", "test"); 
 
      svg.appendChild(svgPath); 
 
      $("body").append(svg); 
 

 
} 
 

 
$(document).ready(function(){ 
 

 
drawLine($(".box_1"), $(".box_2")) 
 

 
});

.box{ 
 
width:150px; 
 
height:150px; 
 
margin:30px; 
 
background:black; 
 

 
} 
 

 
svg{ 
 
position:absolute; 
 
left:0; top:0; 
 
width:100%; 
 
height:100%; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box box_1'></div> 
 

 

 
<div class='box box_2'></div>