create line to svg on circle

create line to svg on circle

by jihoon kim

HTML

<!-- <svg height="400" width="500">
<line x1="0" y1="0" x2="1000" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.    
</svg> -->
<div id="chartDiv">

<svg version="1.1" style="position: absolute; width: 781px; height: 150px; top: 0px; left: 0px;"><desc>JavaScript chart by amCharts 3.20.9</desc>
    <g>
        <path cs="100,100" d="M0.5,0.5 L780.5,0.5 L780.5,149.5 L0.5,149.5 Z" fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-opacity="0"></path>
        <path cs="100,100" d="M0.5,0.5 L703.5,0.5 L703.5,94.5 L0.5,94.5 L0.5,0.5 Z" fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-opacity="0" transform="translate(42,35)"></path>
    </g>
    <g>
        <g transform="translate(42,35)">
            <g>
                <path cs="100,100" d="M5.5,94.5 L5.5,94.5 L5.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.1" stroke="#000000"></path>      
            </g>
            <g>
                <path cs="100,100" d="M36.5,94.5 L36.5,94.5 L36.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.1" stroke="#000000"></path>
            </g>
            <g>
                <path cs="100,100" d="M67.5,94.5 L67.5,94.5 L67.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.07" stroke="#000000"></path>
            </g>
            <g>
                <path cs="100,100" d="M98.5,94.5 L98.5,94.5 L98.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.1" stroke="#000000"></path>
            </g>
            <g>
                <path cs="100,100" d="M129.5,94.5 L129.5,94.5 L129.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.1" stroke="#000000"></path>
            </g>
            <g>
                <path cs="100,100" d="M160.5,94.5 L160.5,94.5 L160.5,0.5" fill="none" stroke-width="1" stroke-opacity="0.07" stroke="#000000"></path>
            </g>
            <g>
                <path cs="100,100" d="M191.5,94.5 L191.5,94.5 L191.5,0.5" fill="none" stroke-width="1"...

JavaScript

window.SVGElement.prototype.createLine = function createLine(svg,x1,y1,x2,y2,color,thick) {
    var l = document.createElementNS('http://www.w3.org/2000/svg','line');
    l.setAttribute("x1",x1);
    l.setAttribute("y1",y1);    
    l.setAttribute("x2",x2);    
    l.setAttribute("y2",y2);        
    l.style ="stroke:" + color + ";stroke-width:" + thick;    
    console.info(l);    
    this.appendChild(l);
		console.info(svg);
};

function createLine(svg,x1,y1,x2,y2,color,thick,id) {
    var l = document.createElementNS('http://www.w3.org/2000/svg','line');
    l.setAttribute("id",id);

    l.setAttribute("x1",x1);
    l.setAttribute("y1",y1);    
    l.setAttribute("x2",x2);    
    l.setAttribute("y2",y2);        
    l.style ="stroke:" + color + ";stroke-width:" + thick;
    console.info(l);
    svg.appendChild(l);
		console.info(svg);
}

//createLine(document.querySelector("svg"),0,0,500,0,"#ff0000",2);
//createLine(document.querySelector("svg"),0,0,0,200,"#00ff00",4);
//createLine(document.querySelector("svg"),500,0,500,200,"#0000ff",6);
//createLine(document.querySelector("svg"),0,200,1000,200,"#f0f000",8);
attachXCross(document.querySelector("#chartDiv svg"),document.querySelectorAll("#chartDiv svg circle"));

function attachXCross(svg,circle) {
  console.info(circle, circle[0], circle[circle.length - 1]);

  for (var i = 0; i < circle.length; i++) {
      circle[i].addEventListener('click', function() {
          console.info(document.querySelector("hline"));
          console.info(document.querySelector("vline"));
          if (window.preCircle) {
              window.preCircle.setAttribute("r", "2");
              window.preCircle.setAttribute("fill", "#000088");
          }

          if (document.querySelector("#hline")) svg.removeChild(document.querySelector("#hline"));
          if (document.querySelector("#vline")) svg.removeChild(document.querySelector("#vline"));

          var x = this.transform.baseVal[0].matrix.e;
          var y =...