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


//?類似jq的鏈?zhǔn)秸{(diào)用
//?制作圖中的線條
var?svg?=?d3.select('#container')
????.append("svg:svg")
????//?width,height
????.attr('width',?width)//attribute
????.attr('height',?height);

var?g?=?svg.append("g")
????.attr("transform",?"translate("?+?margin.left?+?","?+?margin.top?+?")");

var?data?=?[1,?3,?5,?7,?8,?4,?3,?7];

//?放大
var?scale_x?=?d3.scaleLinear()
????.domain([0,?data.length?-?1])
????.range([0,?g_width]);

var?scale_y?=?d3.scaleLinear()
????.domain([0,?d3.max(data)])
????.range([g_height,?0]);//?切換坐標(biāo)軸的朝向

var?line_generator?=?d3.line()
????.x(function?(d,?i)?{
????????//?d代表數(shù)據(jù)
????????//?i代表下標(biāo)
????????return?scale_x(i);
????})
????.y(function?(d)?{
????????return?scale_y(d);
????})
????.curve(d3.curveCatmullRom.alpha(0.5));
g.append('path').attr('d',?line_generator(data));


//?制作坐標(biāo)軸
var?x_axis?=?d3.axisBottom(scale_x),
????y_axis?=?d3.axisLeft(scale_y);

g.append("g").call(x_axis)
????.attr("transform",?"translate(0,"?+?g_height?+?")");

g.append("g").call(y_axis)
????.append("text").text("Price($)")?//?設(shè)置單位等
????.attr("transform",?"rotate(-90)")?//?定位
????.attr("text-anchor",?"end")
????.attr("dy",?"1em");

#container?{
??background:?#ddd;
??width:?500px;
??height:?250px;
}
path?{
??fill:?none;
??stroke:?#4682B4;
??stroke-width:?2;
}
text?{
??fill:?#000;
}
.domain,
.tick?line?{
??stroke:?gray;
}