1 var width = 600; //svg绘制区域的宽度 2 var height = 500; //svg绘制区域的高度 3 4 //定义画图区域svg 5 var svg = d3.select("#body") 6 .append("svg") 7 .attr("width",width) 8 .attr("height",height) 9 10 //定义数据 11 var datalist = [80,120,130,70,60,90] 12 //创建一个区域生成器 13 var areapath = d3.svg.area() 14 .x(function(d,i){return 50 + i * 80}) 15 .y0(function(d,i){return height/2}) 16 .y1(function(d,i){return height/2 - d}) 17 18 19 20 //添加路径 21 svg.append("path") 22 .attr("d",areapath(datalist)) //使用了区域生成器 23 .attr("stroke","black") //线段的颜色 24 .attr("stroke-width","3px") //线段的宽度 25 .attr("fill","yellow") //填充的颜色
1 var width = 600; //svg绘制区域的宽度 2 var height = 500; //svg绘制区域的高度 3 4 //定义画图区域svg 5 var svg = d3.select("#body") 6 .append("svg") 7 .attr("width",width) 8 .attr("height",height) 9 10 //定义数据 11 var datalist = [80,120,130,70,60,90] 12 13 //step插值模式 14 var areapath = d3.svg.area() 15 .interpolate("step") 16 .x(function(d,i){return 50 + i * 80}) 17 .y0(function(d,i){return height/2}) 18 .y1(function(d,i){return height/2-d}) 19 20 21 //添加路径 22 svg.append("path") 23 .attr("d",areapath(datalist)) //使用了区域生成器 24 .attr("stroke","black") //线段的颜色 25 .attr("stroke-width","3px") //线段的宽度 26 .attr("fill","yellow") //填充的颜色
1 var width = 600; //svg绘制区域的宽度 2 var height = 500; //svg绘制区域的高度 3 4 //定义画图区域svg 5 var svg = d3.select("#body") 6 .append("svg") 7 .attr("width",width) 8 .attr("height",height) 9 10 //定义数据 11 var datalist = [80,120,130,70,60,90] 12 13 //basis插值模式 14 var areapath = d3.svg.area() 15 .interpolate("basis") 16 .x(function(d,i){return 50 + i * 80}) 17 .y0(function(d,i){return height/2}) 18 .y1(function(d,i){return height/2 - d}) 19 20 //添加路径 21 svg.append("path") 22 .attr("d",areapath(datalist)) //使用了区域生成器 23 .attr("stroke","black") //线段的颜色 24 .attr("stroke-width","3px") //线段的宽度 25 .attr("fill","yellow") //填充的颜色
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论