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,不是标签
