d3学习day1----画曲线

d3画布的基本布局如下图所示。实现过程如下：首先定义绘图容器的大小varwidth=500,height=200,margin={left:50,top:30,right:20,bottom:20},g_width=width-margin。左-margin.right,g_height=height-margin.top-margin.bottom;定义svg元素varsvg=d3.select("#container").append("svg")//设置宽度、高度。attr("width",width)//属性.attr("height",height)并通过append()添加一个g元素，这段代码添加了两个g元素，为了比较select和selectAlld3.select("svg").append("g")//添加第一个gvarg=d3.select("svg").append("g")//添加第二个g，并将此元素赋值给变量g。attr("transform","translate("+margin.left+","+margin.top+")")//定义要绘制的曲线数组data[]vardata=[2,12,3,4,5,6,22]按比例缩放g，对x轴进行缩放varscale_x=d3.scale.linear()//使用d3中的scale函数进行缩放，因为是线性的，所以使用linear.domain([0,data.length-1])//域定义输入范围.range([0,g_width])//range()定义输出范围y轴缩放varscale_y=d3.scale.linear().domain([0,d3.max(data)])//domain定义输入range.range([0,g_height])//range()定义输出范围，d3下svg下通过line()实现line_gEneratorfunctionvarline_generator=d3.svg.line().x(function(d,i){returnscale_x(i);})//x坐标点的值为data数组的下标，参数d代表传入的Data，i代表下标。y(function(d){returnscale_y(d)})//y坐标的值是数组中每个实际项的值。interpolate("cardinal")//使线变得平滑，而不是断线linebutasmoothcurve//d3.select("g")//.append("path")//.attr("d",line_generator(data))//通过d属性值，添加line_generatorfunction////其实d是path-data的缩写，d="M"当页面有多个相同的元素时，select只能选择第一个满足条件的元素。如果要选择指定的元素之一，可以将该元素赋值给一个变量，然后使用变量名实现下面的，g是指上面赋值的变量g，不是标签和selectAll选择页面中的所有元素g。append("path").attr("d",line_generator(data))//通过d的属性值添加line_generator函数//其实d是path-data的缩写，d="M0,2Q0.7999999999999999,11.9,1,12C1.3,12.15,1.7,4.2,2,3S2.7,3.7,3,4S3.7,4.7,4,5S4.7,3.449999999999997,5,6Q5.2,7.7,6,22"withoutscaling初始图片加上缩放后的效果缩放代码：Scaleproportionallyvarscale_x=d3.scale.linear()//使用d3中的scale函数进行缩放，因为是线性的，所以使用linear.domain([0,data.length-1])//domain定义了输入范围。range([0,g_width])//range()定义输出范围varscale_y=d3.scale.linear().domain([0,d3.max(data)])//domain定义输入范围.range([0,g_height])//range()定义输出范围到设置css后的路径css代码:path{/*定义绘制的无填充线，*/fill:none;/*线条颜色*/stroke:brown;/*线条粗细*/stroke-width:2;}设置平滑代码后：.interpolate("cardinal")//让线条变得平滑，不是折线而是平滑的曲线这样，d3的线条绘制就完成了，接下来就是绘制坐标系了，请参考下一篇，~~~