【D3.js學習總結】4、D3建立SVG

徐輝jser發表於2017-01-20
JSSVG

D3圖表大都是由SVG來實現的，所以在繼續學習前需要了解一些SVG的知識，可以通過看svg教程來學習一下。

D3可以生成一般的SVG形狀，它也內建了很多SVG圖表，方便我們直接生成實用的圖表。

我們先來建立一個SVG容器，其它SVG圖形都需要在容器裡來建立：

var body = d3.select(`body`);
var svg = body.append(`svg`).attr(`width`,200).attr(`height`,200);

普通SVG

用D3來生成一般的SVG圖形，可以直接用 append + attr 就可以實現，例如：

線條(line)：

var line = svg.append(`line`).attr(`x1`,100).attr(`y1`,100).style({fill:`none`,stroke:`#000`});

圓(circle)：

var circle = svg.append(`circle`).attr(`cx`,50).attr(`cy`,50).attr(`r`,50).style({fill:`#000`});

SVG生成器

D3為我們提供了更復雜的svg圖形生成器，結合資料我們可以輕鬆繪製出複雜的SVG，例如：

折線圖(d3.svg.line)：

var data = [[{x:0,y:100},{x:50,y:80},{x:100,y:150},{x:150,y:50},{x:200,y:120}]];
var line = d3.svg.line().x(function(d){return d.x}).y(function(d){return 200-d.y});
var lineChart = svg.selectAll(`path`).data(data);
lineChart.enter().append(`path`).attr(`d`,function(d){return line(d)}).style({fill:`none`,stroke:`#000`});

面積圖(d3.svg.area)：

var data = [[{x:0,y:100},{x:50,y:80},{x:100,y:150},{x:150,y:50},{x:200,y:120}]];
var area = d3.svg.area().x(function(d){return d.x}).y0(function(d){return 200}).y1(function(d){return 200-d.y});
var areaChart = svg.selectAll(`path`).data(data);
areaChart.enter().append(`path`).attr(`d`,function(d){return area(d)}).style({fill:`#000`});

圓弧圖(d3.svg.arc)：

var angle = 2*Math.PI;
var data = [{startAngle:0,endAngle:0.2*angle},{startAngle:0.5*angle,endAngle:0.8*angle}];
var arc = d3.svg.arc().innerRadius(50).outerRadius(100);
var arcChart = svg.selectAll(`path`).data(data);
arcChart.enter().append(`path`).attr(`transform`,`translate(100,100)`).attr(`d`,function(d){return arc(d)}).style({fill:`#000`});

徑向折線圖(d3.svg.line.radial)：

var angle = 2*Math.PI;
var data = [[100,80,60,90,90,100]];
var lineRadial = d3.svg.line.radial().radius(function(d){return d}).angle(function(d,i){if(i == 5){return 0};return (i/5)*angle});
var lineRadialChart = svg.selectAll(`path`).data(data);
lineRadialChart.enter().append(`path`).attr(`transform`,`translate(100,100)`).attr(`d`,function(d){return lineRadial(d)}).style({fill:`none`,stroke:`#000`});

徑向面積圖(d3.svg.area.radial)：

var angle = 2*Math.PI;
var data = [[100,80,60,90,90,100]];
var areaRadial = d3.svg.area.radial().innerRadius(function(d) { return d/2; }).outerRadius(function(d) { return d; }).angle(function(d,i){if(i == 5){return 0};return (i/5)*angle});
var areaRadialChart = svg.selectAll(`path`).data(data);
areaRadialChart.enter().append(`path`).attr(`transform`,`translate(100,100)`).attr(`d`,function(d){return areaRadial(d)}).style({fill:`#000`});

弦圖(d3.svg.chord)：

var angle = 2*Math.PI;
var chordRadial = d3.svg.chord().radius(100).source({startAngle:0,endAngle:0.1*angle}).target({startAngle:0.4*angle,endAngle:0.8*angle});
var chordRadialChart = svg.append(`path`).attr(`transform`,`translate(100,100)`).attr(`d`,function(d){return chordRadial(d)}).style({fill:`#000`});

對角線圖(d3.svg.diagonal)：

var angle = 2*Math.PI;
var diagonal = d3.svg.diagonal().source({x:10,y:30}).target({x:180,y:200});
var diagonalRadialChart = svg.append(`path`).attr(`d`,function(d){return diagonal(d)}).style({fill:`none`,stroke:`#000`});

符號(d3.svg.symbol)：

var symbol = d3.svg.symbol().type(function(d,i){return type[d-1]}).size(function(d){return d*50;});
var data = [1,2,3,4,5];
var type = [`circle`,`cross`,`diamond`,`square`,`triangle-down`,`triangle-up`];
var symbolChart = svg.selectAll(`path`).data(data).enter().append(`path`);
symbolChart.attr(`transform`,function(d,i){var t = i*20+10;return `translate(`+ t +`,`+ t +`)`}).attr(`d`,function(d){return symbol(d)}).style({fill:`none`,stroke:`#000`});

座標軸(d3.svg.axis)：

var axisx = d3.svg.axis().scale(d3.scale.linear().domain([0,100]).range([0,140])).ticks(5);
var axisxChart = svg.append(`g`).attr(`transform`,`translate(30,170)`).call(axisx).style({fill:`none`,`stroke-width`:1,stroke:`#000`,`font-size`:12});
var axisy = d3.svg.axis().scale(d3.scale.linear().domain([0,100]).range([140,0])).ticks(5).orient(`left`);
var axisyChart = svg.append(`g`).attr(`transform`,`translate(30,30)`).call(axisy).style({fill:`none`,`stroke-width`:1,stroke:`#000`,`font-size`:12});

brush(d3.svg.brush)：

svg.style(`background`,`#eee`);
var linear = d3.scale.linear().domain([0,100]).range([0,200]);
var brush = d3.svg.brush().x(linear).on(`brush`,function(){
  console.log(brush.extent());
});
var g = svg.append(`g`).call(brush).selectAll(`rect`).attr(`height`,200);

點選這裡檢視線上效果

總結

D3製作圖表的過程就是將各種SVG圖形拼接在一起的過程；


相關文章