当前位置: 首页 > Web前端 > HTML

d3学习day1----画曲线

时间:2023-04-02 20:34:06 HTML

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的线条绘制就完成了,接下来就是绘制坐标系了,请参考下一篇,~~~