Diziler 2

by Erdinç Uzun

HTML

<svg id="svg02" width="600" height="130">
</svg>

JavaScript

var veriler = ["34", "61", "23", "34", "59", "18", "14", "15", "19", "45"];
var temp;
temp += '<text x="35" y="20">Adresler:</text>';
temp += '<text x="35" y="60">Veriler:</text>';
temp += '<text x="7" y="100">Point adresi:</text>';
for (i = 0; i < 10; i++) {
x1 = 100+i*50; 
x2 = 106+i*50;
t2 = 1000+i*2;
temp += '<rect x="'+x1+'" y="30" width="50" height="50" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>';
temp += '<text x="'+x2+'" y="20">'+t2+'</text>';
}

x3 = 115+i*50;
x4 = 110+i*50;
temp += '<text x="115" y="60">'+veriler[0]+'</text>';
temp += '<text x="110" y="100">1002</text>';
temp += '<text x="165" y="60">'+veriler[1]+'</text>';
temp += '<text x="160" y="100">1008</text>';
temp += '<text x="315" y="60">'+veriler[2]+'</text>';
temp += '<text x="310" y="100">1018</text>';
temp += '<text x="565" y="60">'+veriler[3]+'</text>';
temp += '<text x="560" y="100">1014</text>';
temp += '<text x="465" y="60">'+veriler[4]+'</text>';
temp += '<text x="460" y="100">/</text>';

temp += '<marker id="Arrow"';
temp += 'markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="-2" refY="0" markerUnits="strokeWidth" orient="auto">';
temp += '<polygon points="-2,0 -5,5 5,0 -5,-5" fill="red" stroke="black" stroke-width="1px"></polygon>';
temp += '</marker></defs>';
temp += '<path d="M 125,105 Q 125,120 160,110" stroke="blue" fill="none" stroke-width="3px" marker-end="url(#Arrow)"></path>';  
temp += '<path d="M 180,105 Q 180,120 310,110" stroke="blue" fill="none" stroke-width="3px" marker-end="url(#Arrow)"></path>';     
temp += '<path d="M 330,105 Q 430,120 560,110" stroke="blue" fill="none" stroke-width="3px" marker-end="url(#Arrow)"></path>';   
temp += '<path d="M 550,95 Q 510,105 490,95" stroke="blue" fill="none" stroke-width="3px" marker-end="url(#Arrow)"></path>';  
               
$("#svg02").html(temp);