<style type="text/css">
rect:hover {
fill: orange;
}
rect {
transition: all 0.2s;
-moz-transition:all 0.3s;
-webkit- transition:all 0.3s;
-moz-transition:all 0.3s;
}
#tooltip{
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
pointer-events: none;
}
#tooltip.hidden{
display: none;
}
#tooltip p{
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
<body>
<div id="tooltip" class="hidden">
<p><strong> the value is </strong></p>
<p><span id="value"></span>%</p>
</div>
</body>
<script type="text/javascript">
var dataset=[];
for (var i=0;i<30;i++){
var num=Math.round(Math.random()*30);
dataset.push(num);
}
// var dataset=[5,15,25,35,45,12,12,23,65,43,78,33,33,43,12,12,23,65,43,78,33,65,43,78,33,33,43,12];
h=350;
w=800;
var svg=d3.select("body").append("svg");
svg.attr("height",h)
.attr("width",w);
/*根據數據個數映射到w，平均分配寬度，間距是0.5，*/
var xscale=d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.1);//ordinal是一個序數比例尺，會根據數據集數量來平均分段，且保存了每段的寬度，
/*將y值映射到0-100*/
var yscale=d3.scale.linear()//當數據類型不是點集的形式，max（）下不用嵌套匿名函數
.domain([0,d3.max(dataset,function(d){
return d;
})])
.range([5,h]);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d));
})
.attr("height",function(d){
return yscale(d);
})
.attr("width",xscale.rangeBand())
.attr("fill",function(d){
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
.on("click",function(d){
console.log(d);
})
.on("mouseover",function(d){
var xposition=parseFloat(d3.select(this).attr("x")+xscale.rangeBand/2);
var yposition=parseFloat(d3.select(this).attr("y")/2+h/2);
d3.select("#tooltip")
.transition()
.duration(500)
.style("left",xposition+"px")
.style("top",yposition+"px")
.select("#value")
.text(d)
d3.select("#tooltip").classed("hidden",false);
})
.on("mouseout",function(){
d3.select("#tooltip").classed("hidden",true);
})
.on("click",function(){
sortBar();
})
// .append("title")
// .text(function(d,i){
// return "value:"+d;
// })
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d)+12);
})
.attr("font-size","10px")
.attr("fill","white")
.style("pointer-events","none")
/*排序函數*/
var sortorder=true;
var sortBar=function(){
/*重寫sort函數*/
sortorder=!sortorder
// var sort=function(a,b){
// if (sortorder){
// return d3.ascending(a,b);
// }
// else{
// return d3.descending(a,b);
// }
// }
d3.selectAll("rect")
.sort(function(a,b){
if (sortorder){
return d3.ascending(a,b);
}
else{
return d3.descending(a,b);
}
})
.transition()
.delay(function(d,i){
return i*50;
})
.duration(1000)
.attr("x",function(d,i){
return xscale(i);
})
d3.selectAll("text")
.sort(function(a,b){
if (sortorder){
return d3.ascending(a,b);
}
else{
return d3.descending(a,b);
}
})
.transition()
.delay(function(d,i){
return i*50;
})
.duration(1000)
.attr("x",function(d,i){
return xscale(i);
})
}
</script>D3柱狀圖練習
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.