一:要实现的效果
二:代码展示
1.需求分析
(1)数据以列表形式展示
var data=[[176.71,77.28,312.23,58.60,
119.62,179.52,458.55,359.68,
114.46,188.93,178.30 ,254.05],
[437.77,153.76,347.83,190.85,
369.70,21.06,219.18,320.39,
481.47,106.88,298.88,482.32]];
(2)折线光滑
需要在直线生成器中设置插值函数。默认点与点之间是直线,折线图并不光滑。
var linePath=d3.svg.line()
.x(function(d,i){
return xScale(i+1);
})
.y(function(d,i){
return yScale(d);
})
.interpolate("basis");
(3)坐标轴样式设置
<