<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>svg</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
svg{
background-color: #DDD;
}
.axis line,.axis path{
fill:none;
stroke:black
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
// 绘制柱状态
let width=500,height=500,num=30;
// 定义数据源 学员成绩
let score=[60,50,80,35,70,40]
let text=['语文','数学','英语','化学','物理','体育'];
// 1 创建svg容器
let svg = d3.select('body').append('svg').attr('width',width).attr('height',height);
// 需要创建g元素 相当于 block 只起到包裹元素作用 方便后期代码维护管理
let g = svg.append('g').attr('transform',`translate(${num},${num})`)
// // 定义比例尺
// let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([0,height-num*2])
let scaleY = d3.scale.linear().domain([0,d3.max(score)]).range([height-num*2,0])
let scaleX = d3.scale.ordinal().domain(text).rangeRoundBands([0,width-num*2],0.4)
// 颜色比例尺
let color = d3.scale.category10();
// 往g元素中追加rect矩形（根据数据） 绘制柱状图
//ease（）： linear:线性 circle：缓慢 elastic：带有弹跳的到达最终状态 bounce：最后跳动
// transition:开启动画过度效果
// duration:指定每个元素的动画持续时间
// delay:指定每个元素的动画延迟时间
g.selectAll('rect').data(score).enter()
.append('rect')
.attr('x',(d,i)=>{return scaleX(text[i])})
// .attr('y',(d,i)=>{return scaleY(d)})
.attr('y',(d,i)=>{return height-num*2})
.attr('width',()=>{return scaleX.rangeBand()})
// .attr('height',(d,i)=>{return height-num*2-scaleY(d)})
.attr('height',(d,i)=>{return 0})
.attr('fill',(d,i)=>{return color(i)})
.on('mouseover',function(){
d3.select(this).attr('fill','yellow')
})
.on('mouseout',function(d,i){
d3.select(this).transition().duration(500).attr('fill',()=>{
return color(i)
})
})
.transition()
.duration(1000)
.delay((d,i)=>{
return i*400
})
.ease('bounce')
.attr('y',(d,i)=>{return scaleY(d)})
.attr('height',(d,i)=>{return height-num*2-scaleY(d)})
// 给柱状图添加文本描述
g.selectAll('text').data(score).enter()
.append('text')
.attr('x',(d,i)=>{return scaleX(text[i])})
.attr('y',(d,i)=>{return height-num*2})
.attr('dx',(d,i)=>{return 6})
.attr('dy',(d,i)=>{return -5})
.text((d,i)=>{return d})
.attr('fill',(d,i)=>{return color(i)})
.transition()
.duration(1000)
.delay((d,i)=>{
return i*400
})
.ease('bounce')
.attr('y',(d,i)=>{return scaleY(d)})
// .attr('height',(d,i)=>{return height-num*2-scaleY(d)})
// 绘制比例尺 axis() orient() 控制文本在轴的展示方向问题 left right top bottom
let x = d3.svg.axis().scale(scaleX)
let y = d3.svg.axis().scale(scaleY).orient('left')
// 追加比例尺
g.append('g').attr('class','axis').call(x).attr('transform',`translate(0,${height-num*2})`)
g.append('g').attr('class','axis').call(y)
</script>
</html>
