D3.js 基本繪圖

繪製直線

 
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);

繪製矩型

 
var svg2 = d3.select('#d3_rect').append('svg');
svg2.style('height',130)
.append('rect')
.attr('width', 200).attr('height', 100);

繪製圓型

 
var svg3 = d3.select('#d3_circle').append('svg');
svg3.style('height',130)
.append('circle')
.attr('cx', 60).attr('cy', 60).attr('r', 50);

繪製橢圓

 
var svg4 = d3.select('#d3_ellipse').append('svg');
svg4.style('height',130)
.append('ellipse')
.attr('cx', 100).attr('cy', 60).attr('rx', 80).attr('ry', 50);