代码自己跟着视频上一行一行写的,写到一半没效果了,d3.js是引用网上最新版本的.浏览器是火狐最新版本.环境webstrom8.0.
展示效果只有一个背景图,没有线图,查看元素g标签尺寸是 0*0 ,path标签没添进去.就卡在这里了,效果如图所示:
html文件里面的部分代码如下:
lower.js代码如下:
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;//svgvar svg = d3.select("#cont") .append("svg:svg")//width,height .attr("width",width) .attr("height",height)var g = d3.select("svg") .append("g") .attr("transform","translate('+ margin.left +','+ margin.top + ')")var data = [1,3,5,7,8,4,3,7]var scale_x = d3.scale.linear() .domain([0,data.length - 1]) .range([0,g_width])var scale_y = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,g_height])var line_generator = d3.svg.line() .x(function(d,i){return scale_x(i);}) .y(function(d){return scale_y(d);})d3.select("g").append("path").attr("d",line_generator(data)) |
天盟APP下载
