d3.js
/**
* Created by ll0u on 1/12/2015.
*/
//曲线图
//var width = 500,
// height = 250,
// margin = {top: 30, right: 30, bottom: 30, left: 30},
// g_width = width - margin.left - margin.right,
// g_height = height - margin.top - margin.bottom;
//var data = [1,2,8,4,5,2,4,6];
//var scale_x = d3.scale.linear()
// .domain([0, data.length-1])
// .range([0, g_width]);
//var scale_y = d3.scale.linear()
// .domain([0, d3.max(data)])
// .range([g_height, 0]);
//var line = d3.svg.line()
// .x(function(d,i){return scale_x(i)})
// .y(function(d,i){return scale_y(d)})
// .interpolate('cardinal');
//var area = d3.svg.area()
// .x(function(d,i){return scale_x(i)})
// .y0(g_height)
// .y1(function(d,i){return scale_y(d)})
// .interpolate('cardinal');
//var axis_x = d3.svg.axis().scale(scale_x);
//var axis_y = d3.svg.axis().scale(scale_y)
// .orient('left');
//
//var svg = d3.select('#container').append('svg')
// .style({
// width: 500,
// height: 250,
// 'background-color': 'gray'
// });
//
//var g = d3.select('svg').append('g')
// .attr('transform', 'translate('+margin.left+','+margin.right+')');
//g.append('path')
// .attr('d', area(data))
// .style('fill', 'green');
//g.append('g').call(axis_x)
// .attr('transform', 'translate(0,'+g_height+')');
//g.append('g').call(axis_y)
// .append('text')
// .text('Price($)')
// .attr('transform', 'rotate(-90)')
// .attr('text-anchor', 'end')
// .attr('dy', '1em');
//水平柱状图
//var data = [1,2,3,4,5,6,7,8,9,10];
//var bar_height = 40,
// bar_padding = 10,
// svg_heigh = (bar_height + bar_padding) * data.length,
// svg_width = 500;
//var scale = d3.scale.linear()
// .domain([0, d3.max(data)])
// .range([0, svg_width]);
//var svg = d3.select('#container').append('svg')
// .attr({
// width: svg_width,
// height: svg_heigh
// })
//
//var g = svg.selectAll('g')
// .data(data)
// .enter()
// .append('g')
// .attr({
// 'transform': function(d,i){return 'translate(0,'+i*(bar_height+bar_padding)+')'}
// })
//
//g.append('rect')
// .attr({
// 'width': function(d,i){return scale(d)},
// 'height': bar_height
// })
// .style('fill', 'blue')
//g.append('text')
// .text(function(d){return d})
// .attr({
// 'x': function(d){return(scale(d))},
// 'y': bar_height/2 + bar_padding/2,
// 'text-anchor': 'end'
// });
//竖直柱状图
//var data = [1,2,3,4,5,6,7,8,9,10];
//var bar_width = 40,
// bar_padding = 10,
// svg_width = (bar_width + bar_padding) * data.length,
// svg_height = 500;
//var scale = d3.scale.linear()
// .domain([0, d3.max(data)])
// .range([svg_height, 0])
//var svg = d3.select('#container')
// .append('svg')
// .attr({
// width: svg_width,
// height: svg_height
// })
//var g = svg.selectAll('g')
// .data(data)
// .enter()
// .append('g')
// .attr('transform', function(d, i){return 'translate('+(bar_width + bar_padding)*i+',0)'})
//g.append('rect')
// .attr({
// width: bar_width,
// height: function(d, i){return 500-scale(d)},
// y: function(d, i){return scale(d)}
// })
// .style('fill', 'green')
//g.append('text')
// .text(function(d){return d})
// .attr({
// y: function(d, i){return scale(d)},
// x: bar_width/2,
// dy: 15,
// 'text-anchor': 'middle'
// })
var data = [10,35,20,60,25,14];
var year = [2000,2005,2006,2008,2010,2014];
var width = 1000,
height = 500,
margin = {top: 30, right: 30, bottom: 30, left: 30},
svg_width = width + margin.left + margin.right,
svg_height = height + margin.top + margin.bottom;
var scale_y = d3.scale.linear()
.domain([0,d3.max(data)])
.range([height,0])
var scale_x = d3.scale.ordinal()
.domain(year)
.rangeBands([0, width], 0.1)
var axis_y = d3.svg.axis().scale(scale_y).orient('left'),
axis_x = d3.svg.axis().scale(scale_x);
d3.select('#container')
.style({
width: svg_width+'px',
height: svg_height+'px'
})
var svg = d3.select('#container')
.append('svg')
.attr({
width: svg_width,
height: svg_height
})
var chart = svg.append('g')
.attr('transform','translate('+margin.left+','+margin.top+')')
chart.append('g')
.call(axis_x)
.attr('transform', 'translate(0,'+height+')')
.append('text')
.text('(年份)')
.attr({
'text-anchor': 'end',
x: width,
dy: '1.2em'
});
chart.append('g')
.call(axis_y)
.append('text')
.text('(亿元)')
.attr({
'transform': 'rotate(-90)',
'text-anchor': 'end',
dy: '1.2em'
});
var g = chart.selectAll('.bar')
.data(data)
.enter()
.append('g')
.attr('class', 'bar')
.attr('transform', function(d,i){return 'translate('+scale_x(year[i])+',0)'});
g.append('rect')
.attr({
width: scale_x.rangeBand(),
height: function(d){return height - scale_y(d)},
y: function(d){return scale_y(d)}
})
.style('fill', 'green')
g.append('text')
.text(function(d,i){return d})
.attr({
y: function(d){return scale_y(d)},
x: scale_x.rangeBand()/2,
'text-anchor': 'middle',
dy: 15
})
/**
* Created by ll0u on 1/12/2015.
*/
var data = {
education: ['小学','初中','中专','大专','本科','硕士'],
population: [82546, 52134, 42514, 32152, 21425, 12045],
color: ['green', 'pink', 'blue', 'gold', '#eee', '#ccc']
}
var svg_width = 600,
svg_height = 600;
var arc_generator = d3.svg.arc()
.innerRadius(100)
.outerRadius(200)
var angle_generator = d3.layout.pie()
.value(function(d){return d})
console.log(angle_generator(data.population))
var svg = d3.select('#container')
.append('svg')
.attr({
width: svg_width,
height: svg_height
})
var g = svg.append('g')
.attr('transform', 'translate('+svg_width/2+','+svg_height/2+')');
g.selectAll('path')
.data(angle_generator(data.population))
.enter()
.append('path')
.attr('d', arc_generator)
.style('fill', function(d,i){return data.color[i]})
g.selectAll('text')
.data(angle_generator(data.population))
.enter()
.append('text')
.text(function(d, i){return data.education[i]})
.attr('transform', function(d,i){return 'translate('+arc_generator.centroid(d)+')'})
.attr('text-anchor', 'middle')