Step1
新建一个文件夹linechart，里面新建一个HTML页面命名linechart；一个css文件夹，里面建一个样式表style.css;一个js文件夹，里面健一个js文件index.js；所有文件名可以根据自己习惯更改。
Step2
在html页面head标签引入外部样式表。
Step3
我在链接样式表的时候，觉得找文件路径很费劲，也不知道对不对。找到一个很好的检验方式，在body标签中加上这段代码
样式
就可以直接点击链接，查看是不是对应的样式表了，js文件也可以这么操作。
Step4
在body标签中，设置一个图表容器，写一个div，id=“container”，然后在css里定义容器样式。
#container{
background:#ddd;
width:500;
height:250;
}
Step5
在body里最后面，链接D3,和本地自己的js文件。
Step6
在js里，select选择刚刚建立好的div容器的id，用append建一个svg画布，并设置hight和weight两个变量。
//svg
var svg = d3.select("#container")
.append("svg")
Step7 完整的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("#container")
.append("svg")
//width,height
.attr("width",width)//attribute
.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.scaleLinear()
.domain([0, data.length-1])
.range([0,g_width])
var scale_y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([g_height,0])
var line_generateor = d3.line()
.x(function(d,i){ return scale_x(i);})//0,1,2,3
.y(function(d){ return scale_y(d);})//1,3,5
.curve(d3.curveCardinal)
d3.select("g")
.append("path")
.attr("d",line_generateor(data))//d="M1,0L20"
//x
var x_axis = d3.axisBottom(scale_x);
var y_axis = d3.axisLeft(scale_y);
g.append("g")
.call(x_axis)
.attr('transform','translate(0,'+g_height+')')
//y
g.append("g")
.call(y_axis)
.append("text")
.text('Price($)')
.attr("transform","rotate(-90)")//旋转
.attr("text-anchor","end")//与末端对齐
.attr("dy","1em")