||

d3js学习–动态柱状图

作者daliane

<html>
<head>
<meta charset=”utf-8″>
<title>Transition</title>
</head>
<style>
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>

<script src=”http://d3js.org/d3.v3.min.js” charset=”utf-8″></script>
<script>

var width = 600;
var height = 600;
var dataset = [];
var num = 15; //数组的数量

for(var i = 0; i < num ; i++){
var tempnum = Math.floor( Math.random() * 50 ); // 返回 0~49 整数
dataset.push(tempnum);
}

var svg = d3.select(“body”).append(“svg”)
.attr(“width”,width)
.attr(“height”,height);

var xAxisScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500]);

var yAxisScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([500,0]);

var xAxis = d3.svg.axis()
.scale(xAxisScale)
.orient(“bottom”);

var yAxis = d3.svg.axis()
.scale(yAxisScale)
.orient(“left”);

var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500],0.05);

var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,500]);

svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)

//动态化开始
//y方向运动
.attr(“y”,function(d,i){
return 50 + 500 ;
})

.attr(“height”,0)
.attr(“fill”,”red”)
//启动转变效果只需要添加这个即可。把它加到两种状态之间
.transition()
//指定整个转变持续多少时间，单位为毫秒
.duration(3000)

/* 指定转变的方式，常用的转变方式有：

linear 普通的线性变化
circle 慢慢地到达变换的最终状态
elastic 带有弹跳的到达最终状态
bounce 在最终状态处弹跳几次
*/
.ease(“bounce”)
/*指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。这个函数可以对整体指定延迟，也可以对个别指定延迟。*/
.delay(function(d,i){
return 200*i;
})

.attr(“x”, function(d,i){
return 30 + xScale(i);
} )
.attr(“y”,function(d,i){
return 50 + 500 – yScale(d) ;
})
.attr(“width”, function(d,i){
return xScale.rangeBand();
})
//高有变化
.attr(“height”,yScale)
//颜色有变化
.attr(“fill”,”steelblue”);
//动态化完毕
svg.selectAll(“text”)
.data(dataset)
.enter().append(“text”)
.attr(“x”, function(d,i){
return 30 + xScale(i);
} )
.attr(“y”,function(d,i){
return 50 + 500 – yScale(d) ;
})
.attr(“dx”, function(d,i){
return xScale.rangeBand()/3;
})
.attr(“dy”, 15)
.attr(“text-anchor”, “begin”)
.attr(“font-size”, 14)
.attr(“fill”,”white”)
.text(function(d,i){
return d;
});

svg.append(“g”)
.attr(“class”,”axis”)
.attr(“transform”,”translate(30,550)”)
.call(xAxis);

svg.append(“g”)
.attr(“class”,”axis”)
.attr(“transform”,”translate(30,50)”)
.call(yAxis);

</script>
</body>
</html>

类似文章