histogram布局用法

2022-01-22 13:05:59 字數 2169 閱讀 3714

histogram布局，頻率分布直方圖，字面意思很明了，表明了乙個範圍內分布的頻率，其中每個柱型表明了這個範圍內個數。

//隨機生成正態分佈資料


var random=d3.random.normal(170


,10);//均值和方差


var dataset=


for (var i=0;i<100;i++)


console.log(dataset);


//定義histgram布局


var histogram=d3.layout.histogram()


.range([30


,200])


.bins(20)


.frequency(true);


var histdata=histogram(dataset);
用布局物件包裹資料，會生成我們想要的資料其實所有的布局都是用來包裹資料，生成特定所需要的資料，然後我們從這些資料中抽取我們所需要的資料，用路徑，或者rect，circle等基本圖形

控制台可以看出，三個字段，x，y，dx

//我們抽取x來生成x軸的輸入域


//map是array的乙個方法迴圈histdata中的d.x，返回乙個新的d.x陣列


var ticks=histdata.map(function(d));


var xscale=d3.scale


.ordinal()


.domain(ticks)


.rangeroundbands([padding,width-padding],0.1);


console.log(ticks)


var xaxis=d3.svg


.axis()


.scale(xscale)


.orient("buttom")


.tickformat(d3.format(".0f"));


.attr("class","axis")


.attr("transform","translate("+0+","+(height-padding)+")")


.call(xaxis);


/*y軸*/  


//d3找最小值，最大值方法


var min=d3.min(histdata,function(d));


var max=d3.max(histdata,function(d));


var yscale=d3.scale


.linear()


.domain([min,max])


.range([height-padding,padding]);


var yaxis=d3.svg


.axis()


.scale(yscale)


.orient("left")


.tickformat(d3.format(".0f"));


.attr("class","axis")


.attr("transform","translate("+padding+",0)")


.call(yaxis);
我們抽出來的tick資料 

/*將g從右上角移動*/


.attr("transform","translate(0,-40)")//-40的意思是從svg的下邊移動

				
histogram 和 bar plot的區別
最本質的區別是這樣的 histogram用來描述的是numerical變數，而bar plot用來描述的是categorical型別的變數。統計學當中關於變數的分類 這可以從它們的圖形上面看到 histogram的橫軸用bin把變數分在乙個特定的區間裡面，比如年齡變數，以五歲乙個長度分開，那麼乙個b...

				
flex彈性布局 用法
簡介 傳統的做法，我們要準確的定位乙個元素，需要知道元素具體的寬度 高度 padding margin 配合position display float屬性，這樣是實現了元素的定位，但是這樣未免太過麻煩，而且也有一些弊端，比如 如何實現垂直劇中？flex布局就解決了這樣的問題，也簡易了元素的布局。f...

				
Flex布局     flex布局的詳細用法總結
tips 行內元素也可以使用 flex 布局 box 注意 flex 布局以後，子元素的float clear和vertical align屬性將失效 概念 採用 flex 布局的元素，稱為 flex 容器，簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案，簡稱 專案 六個屬性 1....