使用d3.js动态获取数据文件,并进行垂直柱状图表渲染
一、最终效果截图:
二、动态返回的原始数据:
三、数据描述:
本地请求数据的名字:d3-data.csv
HTML文件与d3-data.csv文件位置关系:在同一目录级别。
本地请求数据的内容:必须一行一条数据。
year,population
1953,5.94
1964,6.95
1982,10.08
1990,11.34
2000,12.66
2010,13.40
数据详情截图:
四、代码详情:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d3获取动态数据文件并进行图表渲染</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script type="text/javascript">
// 语法:d3.csv(url 数据文件路径,callback 回调函数) 类似ajax()
d3.csv('./d3-data.csv',type,function(data1){
console.log(data1,'数据')
// 定义柱形图数据 回调函数返回的data
var data = data1
// 定义每个柱形图之间的间隙和高度
var barWidth = 50
var barPadding = 10
var svgHeight = 500
//计算svg的高度
var svgWidth = (barWidth+barPadding)*data.length
// 定义线性缩放
var scale = d3.scale.linear()
.domain([0,d3.max(data,function(d){ return d.population}) ])
.range([svgHeight,0])
var svg = d3.select('#container')// 容器元素选择,
.append('svg') //并向其内添加一个svg元素。
.attr('width',svgWidth) //设置宽高
.attr('height',svgHeight)
var bar = svg.selectAll('g') //选择所有g元素
.data(data) //使用.data()进行图形数据绑定
.enter() //追加插入g DOM元素
.append('g')
.attr('transform',function(d,i){ return 'translate('+i*(barWidth+barPadding)+',0)'})
// 定义矩形
bar.append('rect')
.attr({
'y': function(d){ return scale(d.population)},
'width': barWidth,
'height':function(d){ return svgHeight-scale(d.population)}
})
.style('fill','#4682B4')
bar.append('text')
.text(function(d){ return d.year})
.attr({
'y':function(d){ return scale(d.population)},
'x':barWidth/2,
'text-anchor': 'end' //设置文字对齐属性
})
})
// population数据类型转换: String -> Number
function type(d){
d.population = +d.population
return d
}
</script>
</body>
</html>