html svg 折线图原理,D3.js svg绘制折线图

折线图的制作

.axis path,

.axis line{

fill:none;

stroke:black;

shape-rendering:crispEdges;

}

var width=500;

var height=500;

var dataset=[

{

country:"china",

gdp:[[2000,11920],[2001,13170],[2002,14550],

[2003,16500],[2004,19440],[2005,22870],

[2006,27930],[2007,35040],[2008,45470],

[2009,51050],[2010,59490],[2011,73140],

[2012,83860],[2013,103550],]

},

{

country:"japan",

gdp:[[2000,47310],[2001,41590],[2002,39800],

[2003,43020],[2004,46550],[2005,45710],

[2006,43560],[2007,43560],[2008,48490],

[2009,50350],[2010,54950],[2011,59050],

[2012,59370],[2013,48980],]

}

];

var padding={top:70, right:70, bottom: 70, left:70};

var gdpmax=0;

for(var i=0;i

var currGdp=d3.max(dataset[i].gdp,function(d){

return d[1];

});

if(currGdp>gdpmax)

gdpmax=currGdp;

}

console.log(gdpmax);

var xScale=d3.scale.linear()

.domain([2000,2013])

.range([0,width-padding.left-padding.right]);

var yScale=d3.scale.linear()

.domain([0,gdpmax*1.1])

.range([height-padding.bottom-padding.top,0]);

var linePath=d3.svg.line()//创建一个直线生成器

.x(function(d){

return xScale(d[0]);

})

.y(function(d){

return yScale(d[1]);

})

.interpolate("basis")//插值模式

;

//定义两个颜色

var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];

var svg=d3.select("body")

.append("svg")

.attr("width",width)

.attr("height",height);

svg.selectAll("path")

.data(dataset)

.enter()

.append("path")

.attr("transform","translate("+padding.left+","+padding.top+")")

.attr("d",function(d){

return linePath(d.gdp);

//返回线段生成器得到的路径

})

.attr("fill","none")

.attr("stroke-width",3)

.attr("stroke",function(d,i){

return colors[i];

});

var xAxis=d3.svg.axis()

.scale(xScale)

.ticks(5)

.tickFormat(d3.format("d"))

.orient("bottom");

var yAxis=d3.svg.axis()

.scale(yScale)

.orient("left");

//添加一个g用于放x轴

svg.append("g")

.attr("class","axis")

.attr("transform","translate("+padding.left+","+(height-padding.top)+")")

.call(xAxis);

svg.append("g")

.attr("class","axis")

.attr("transform","translate("+padding.left+","+padding.top+")")

.call(yAxis);

原理：

1、如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺(Scale)了。

2、定义域与值域

在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。

3、两种比例尺

①线性比例尺：

其中，d3.scale.linear() 返回一个线性比例尺，返回值可以当做函数来使用的。domain() 和 range() 分别设定比例尺的定义域和值域。

注意：V4 版本改变了写法，应该是 var linear = d3.scaleLinear(); 。

在这里还用到了两个函数，它们经常与比例尺一起出现：

1.d3.max()

2.d3.min()

这两个函数能够求数组的最大值和最小值，是 D3 提供的。

②序数比例尺：

如果，定义域和值域不一定是连续的，都是离散的。那就要用到序数比例尺了。