課程
/前端開發(fā)
/Html5
/使用D3制作圖表
請問有課程代碼嗎？
2020-01-04
源自：使用D3制作圖表 2-1
正在回答
這是我寫的第一個(gè)曲線的代碼，你自己改一下吧
這是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+")")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("text-anchor","end")
.attr("dy","1em")
舉報(bào)
教你使用最酷的數(shù)據(jù)可視化圖表，初探數(shù)據(jù)可視化奧秘
4 回答求使用D3制作圖表課程源代碼
1 回答我想說有代碼下載嗎？?
1 回答有這個(gè)源碼地址嗎？
2 回答老師，您上課時(shí)的代碼在哪里呀？麻煩您共享出來唄
1 回答求示例代碼
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
<abbr id="kohng"></abbr>
2020-02-07
這是我寫的第一個(gè)曲線的代碼，你自己改一下吧
這是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")
?
?