【D3.js 学习总结】4、D3 创建SVG

2021-12-17 15:32:36

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图形拼接在一起的过程；

码农公寓