使用D3制作图表第二章:画线图代码和视频上一样,效果不显示,求助0.0

Question

代码自己跟着视频上一行一行写的,写到一半没效果了,d3.js是引用网上最新版本的.浏览器是火狐最新版本.环境webstrom8.0.

<script src="https://d3js.org/d3.v4.min.js"></script>

展示效果只有一个背景图,没有线图,查看元素g标签尺寸是 0*0 ,path标签没添进去.就卡在这里了,效果如图所示:

html文件里面的部分代码如下:

<div id="cont"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="lower.js"></script>

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;
//svg
var 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))

Answer 1

你可以把d3库下载到本地试试，我之前遇到过类似的问题，就是svg元素和g元素都添加不进去，引用本地的d3库文件就正常显示了