D3学习笔记：线性图表

最新推荐文章于 2022-07-08 11:24:31 发布

???Sir

最新推荐文章于 2022-07-08 11:24:31 发布

阅读量124

点赞数

原文链接：https://segmentfault.com/a/1190000009120894

版权

图片描述

<!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')

稍稍对上面的代码改变就能得到面积图标

图片描述

图片描述
参考

使用D3制作图表
 D3 API Reference

???Sir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3学习笔记：线性图表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>linechart</title> <link rel="stylesheet" type="t...
复制链接

扫一扫

D3学习笔记： 线性图表

D3学习笔记：线性图表