D3學習筆記：線性圖表

時間 2020-01-16

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>linechart</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div id="container"></div>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

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

path{
    fill:none;
    stroke:steelblue;
    stroke-width:3;
}

text{
    fill:black;
}

.domain,.tick{
    stroke:gray;
    stroke-width:1;

}

//width,height
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')
.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.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_generator = 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)

g.append('path').attr('d',line_generator(data))


var x_axis =d3.axisBottom(scale_x),
y_axis =d3.axisLeft(scale_y);


g.append('g').call(x_axis).attr('transform','translate(0,'+g_height+')')
g.append('g').call(y_axis).append('text').text('Price($)').attr('transform','rotate(-90)').attr('text-anchor','end').attr('dy','2em')

稍稍對上面的代碼改變就能獲得面積圖標 css