d3.js——直方圖的繪製及過去知識點的結合
阿新 • • 發佈:2019-02-14
//隨機生成資料
var rand = d3.random.normal(0,25)
var dataset = [];
for (var i = 0;i <100;i++){
dataset.push(rand());
}
一、直方圖資料轉換函式:
//資料轉換 var bin_num = 15 var histogram=d3.layout.histogram() .range([-50,50]) //區間範圍 .bins(bin_num) //分隔數 .frequency(true)//true:統計個數;false:統計概率 var data = histogram(dataset); console.log (data)
二、開始繪製:
var svg = d3.select("body").append("svg")
.attr("width",600)
.attr("height",600)
var color = d3.scale.category20();
1、定義比例尺
2、繪製圖形var max_height = 400, rect_step = 30,//直方圖間距 heights = []; for (var i = 0;i<data.length;i++){ heights.push(data[i].y) } var scale_y = d3.scale.linear() .domain([d3.min(heights),d3.max(heights)]) .range([0,max_height])
var graphics = svg.append("g")
.attr("transform","translate(30,20)");
(1)繪製矩形並加入動畫效果graphics.selectAll("rect") .data(data) .enter() .append("rect") .attr("y",function(d,i){ return 300 })//動畫開始的y值 .attr("height",0)//動畫開始高度 .attr("fill","red")//動畫開始顏色 .transition()//實現動態效果函式 .duration(3000)//指定整個轉變持續的時間,單位為毫秒 .ease("bounce")//指定轉變的方式,linear:普通的線性變化;circle:慢慢地到達變換的最終狀態;elastic帶有彈跳的到達最終狀態;bounce在最終狀態處彈跳幾次. .delay(function(d,i){ return 200*i; })//指定延遲的時間,表示一定時間後才開始轉變,單位同樣為毫秒 .attr("x",function(d,i){return i*rect_step}) .attr("y",function(d,i){return max_height - scale_y(d.y)}) .attr("width",function(d,i){return rect_step-2}) .attr("height", function (d) { return scale_y(d.y) }) .attr("fill",color)
<pre name="code" class="javascript">//新增滑鼠事件
var rect = graphics.selectAll("rect")
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow")
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color)
})
(2)繪製帶有箭頭的座標軸
//繪製箭頭
var defs = svg.append("defs")
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth",30)
.attr("markerHeight",30)
.attr("viewBox","0 0 20 20")
.attr("refX",6)
.attr("refY",6)
.attr("orient","auto")
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000")
//繪製橫軸、縱軸並新增箭頭
graphics.append("line")
.attr("stroke","black")
.attr("stroke-width","1px")
.attr("x1",0)
.attr("y1",max_height)
.attr("x2",data.length*rect_step)
.attr("y2",max_height)
.attr("marker-end","url(#arrow)")
graphics.append("line")
.attr("stroke","black")
.attr("stroke-width","1px")
.attr("x1",0)
.attr("y1",max_height)
.attr("x2",0)
.attr("y2",0)
.attr("marker-end","url(#arrow)")
//繪製座標軸的分隔符直線
graphics.selectAll(".linetick")
.data(data)
.enter()
.append("line")
.attr("stroke","black")
.attr("x1",function(d,i){return i*rect_step+rect_step/2})
.attr("y1",max_height)
.attr("x2",function(d,i){
return i*rect_step+rect_step/2
})
.attr("y2",max_height+5)
(3)新增文字
graphics.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("font-size","10px")
.attr("x",function(d,i){
return i * rect_step;
})
.attr("y", function(d,i){
return max_height;
})
.attr("dx",rect_step/2 - 8)
.attr("dy","15px")
.text(function(d){
return Math.floor(d.x);
});
效果如下: