d3.js实例

• 折线图

var margin={left:50,top:30,right:20,bottom:20},g_width=500-margin.left-margin.right,g_height=250-margin.top-margin.bottom

var svg=d3.select('#container').append('svg').attr("width",500).attr('height',250);

var g=d3.select('svg').append('g').attr('transform','translate(50,30)');

var dataX=[2010,2011,2012,2013,2014,2015,2016,2017,2018,2019];
var dataY=[1,3,5,8,1,10,1,30,5];
var dataSet=[[2010,1],[2011,3],[2012,5],[2013,8],[2014,1],[2016,10],[2017,1],[2018,30],[2019,5]]
//设置x轴，y轴范围
var scale_x=d3.scale.linear().domain(dataX).range([0,45,90,135,180,225,270,315,360,405,445]);
var scale_y=d3.scale.linear().domain([0,d3.max(dataY)]).range([g_height,0])

//曲线绘制
var line_generator=d3.svg.line().x(function (value,index) {
  return scale_x(value[0]);
}).y(function (value,index) {
  return scale_y(value[1])
}).interpolate('cardinal')

d3.select('g').append('path').attr('d',line_generator(dataSet))


//x轴 y轴
var x_axis=d3.svg.axis().tickFormat(d3.format('d')).scale(scale_x)
var y_axis=d3.svg.axis().scale(scale_y).orient('left');
g.append('g').call(x_axis).attr('transform','translate(0,'+g_height+')');
g.append('g').call(y_axis).append('text').text('Price($)').attr('transform','rotate(-90) translate(-30,10)').attr('text-achor','end').attr('dy','1em');