[test021] SVGで数直線

SVGで数直線

仕様

• 任意のユーザー入力からSVGで数直線を描く

ソース

javascript

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#draw').addEventListener('click',function(e){
    var svg1           = document.querySelector("#svg1");
    var init_x         = parseInt(document.querySelector('#x').value);
    var init_y         = parseInt(document.querySelector('#y').value);
    var position_x     = init_x;
    var position_y     = init_y;
    var offset_x       = parseInt(document.querySelector('#range_width').value);
    var offset_y       = 0;
    var small_scale    = parseInt(document.querySelector('#small_scale').value);
    var big_scale      = parseInt(document.querySelector('#big_scale').value);
    var big_scale_at   = parseInt(document.querySelector('#big_scale_at').value);
    var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
    var count          = parseInt(document.querySelector('#count').value);
    var start_num      = parseInt(document.querySelector('#start_num').value);
    var add_num        = parseInt(document.querySelector('#add_num').value);

    /* 初期化 */
    [].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});

    var p=[];
    p.push([position_x,position_y]);
    for(var i=0;i<count;i++){
      offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
      p.push([position_x,position_y]);
      position_y-=offset_y
      p.push([position_x,position_y]);
      position_y+=offset_y
      p.push([position_x,position_y]);
      position_x+=offset_x;
    }
    var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
    pl.setAttribute("id","numberLine");
    pl.setAttribute("stroke","black");
    pl.setAttribute("fill","none");
    svg1.appendChild(pl);

    var point=svg1.createSVGPoint();
    p.forEach(function(n){
      point.x = n[0];
      point.y = n[1];
      document.querySelector("#numberLine").points.appendItem(point);
    });
    var texts=[];
    var adjust_num_y = 2;
    var num=start_num;
    for(var i=big_scale_from;i<count;i+=big_scale_at){
      var adjust_num_x = num.toString().length*5;
      texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
      num+=big_scale_at*add_num;
    }
    texts.forEach(function(x){
      var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
      t.setAttribute("id","text");
      t.textContent=x[0];
      t.setAttribute("x",x[1]);
      t.setAttribute("y",x[2]);
      svg1.appendChild(t);
    });
  });
});

HTML

<div id="input">
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
目盛り高さ
小:<input type="text" id="small_scale" value="5" size="2">
大:<input type="text" id="big_scale" value="10" size="2"><br>
大目盛り
頻度:<input type="text" id="big_scale_at" value="5" size="2">
開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
回数:<input type="text" id="count" value="20" size="2"><br>
数値
開始:<input type="text" id="start_num" value="0" size="2">
増加:<input type="text" id="add_num" value="1" size="2"><br>
<input type="button" id="draw" value="draw"><hr>
</div>
<svg id="svg1" width=800 height=300></svg>

元ネタ

• teratail

サンプル

• codepen

See the Pen test021 by yambe jp (@yambejp) on CodePen.