请问有课程代码吗？
150155
2020-01-04 10:24
请问有课程代码吗？
1回答
-
- 慕娘2263752
- 2020-02-07 16:35:44
这是我写的第一个曲线的代码，你自己改一下吧
这是index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>
</head>
<body>
<div id = "container"></div>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type = "text/javascript"src="js/index.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
这是style.css
#container{
background: #ddd;
width:500px;
height:250px;
}
path{
fill:none;
stroke:#4682B4;
stroke-width:2;
}
.domain,tick line{
stroke:grey;
stroke-width:1;
}
------------------------------------------------------------------------------------------------------------------
这是index.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)
.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([g_height,0])
var line_generator = d3.svg.line()
.x(function(d,i){return scale_x(i);})
.y(function(d){return scale_y(d);})
.interpolate("cardinal")
d3.select("g")
.append("path")
.attr("d",line_generator(data))
var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left");
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","1em")
使用D3制作图表
37890 学习 · 112 问题
相似问题