Step1

新建一個(gè)文件夾linechart，里面新建一個(gè)HTML頁(yè)面命名linechart；一個(gè)css文件夾，里面建一個(gè)樣式表style.css;一個(gè)js文件夾，里面健一個(gè)js文件index.js；所有文件名可以根據(jù)自己習(xí)慣更改。

Step2

在html頁(yè)面head標(biāo)簽引入外部樣式表。

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>

Step3

我在鏈接樣式表的時(shí)候，覺(jué)得找文件路徑很費(fèi)勁，也不知道對(duì)不對(duì)。找到一個(gè)很好的檢驗(yàn)方式，在body標(biāo)簽中加上這段代碼

<a href="css/style.css">樣式</a>

就可以直接點(diǎn)擊鏈接，查看是不是對(duì)應(yīng)的樣式表了，js文件也可以這么操作。

Step4

在body標(biāo)簽中，設(shè)置一個(gè)圖表容器，寫一個(gè)div，id=“container”，然后在css里定義容器樣式。

#container{
background:#ddd;
width:500;
height:250;
}

Step5

在body里最后面，鏈接D3,和本地自己的js文件。

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

Step6

在js里，select選擇剛剛建立好的div容器的id，用append建一個(gè)svg畫布，并設(shè)置hight和weight兩個(gè)變量。

//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)")//旋轉(zhuǎn)
.attr("text-anchor","end")//與末端對(duì)齊
.attr("dy","1em")