D3.js

            //指定繪圖容器
            var vis=d3.select("#mysvg");
            //利用d3製作myScale函數，用以讓百分比可直接對應至弧度
            //myScale(0)=0, myScale(100)=2pi
            var myScale=d3.scale.linear().domain([0,100]).range([0,2*Math.PI]);
            //資料陣列，[起始,結束,顏色]
            var datas=[[0,50,"#f00"],[50,75,"#0f0"],[75,100,"#00f"]];
            //.arc()  繪製圓弧
            //.innerRadius(內圓半徑)
            //.outerRadius(外圓半徑)
            //.startAngle(起始角度)
            //.endAngle(結束角度)

繪製直線

 
var svg = d3.select('#d3_line').append('svg');
svg.style('height',130).append('line')
.attr('x1', 40).attr('y1', 10)
.attr('x2', 200).attr('y2', 70)
.style('stroke', 'red').style('stroke-width', 5);

繪製矩型