d3.js[v4] 直方圖布局

王巖威發(fā)布于2019-08-22 15:45 / 1395人閱讀

摘要：直方圖布局直方圖布局可以用來(lái)表示數(shù)據(jù)分布，通過(guò)將離散數(shù)據(jù)點(diǎn)分組歸納到矩形條里繪制。數(shù)據(jù)使用獨(dú)立變量數(shù)為的貝茨分布隨機(jī)數(shù)生成器生成個(gè)之間的數(shù)字定義兩個(gè)映射坐標(biāo)比例尺用直方圖布局轉(zhuǎn)換數(shù)據(jù)綁定數(shù)據(jù)繪制矩形和文本

直方圖布局

直方圖布局可以用來(lái)表示數(shù)據(jù)分布，通過(guò)將離散數(shù)據(jù)點(diǎn)分組歸納到矩形條里繪制。

數(shù)據(jù)

//使用獨(dú)立變量數(shù)為10的貝茨分布隨機(jī)數(shù)生成器生成1000個(gè)0～1之間的數(shù)字
var data = d3.range(1000).map(d3.randomBates(10));

定義兩個(gè)映射坐標(biāo)比例尺

var x = d3.scaleLinear()
    .rangeRound([0, width]);
    

var y = d3.scaleLinear()
    .domain([0, d3.max(bins, function(d) { return d.length; })])
    .range([height, 0]);

用直方圖布局轉(zhuǎn)換數(shù)據(jù)

var bins = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20))
    (data);

綁定數(shù)據(jù)繪制矩形和文本

GPU云服務(wù)器云服務(wù)器 d3.js d3.js 視頻 d3.js 數(shù)據(jù) d3.js 弦圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93717.html

相關(guān)文章

D3.js可視化前端框架的使用要點(diǎn)

摘要：該事件不會(huì)區(qū)分字母的大小寫(xiě)，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱(chēng)為。 1.安裝

MASAILA 2019-08-22 14:57 評(píng)論0 收藏0
d3.js 使用坐標(biāo)軸

摘要：本片記錄坐標(biāo)軸入門(mén)，使用版本如何實(shí)現(xiàn)坐標(biāo)軸生成的坐標(biāo)圖是通過(guò)的路徑元素元素組成的，如下圖表示的是底部坐標(biāo)軸不包括內(nèi)部刻度，如下這部分通過(guò)描繪，在中稱(chēng)為容器則包括了和作為即線，即文字實(shí)現(xiàn)坐標(biāo)軸主要步驟步驟主要如下創(chuàng)建比例尺創(chuàng)建坐標(biāo)軸，是個(gè)函數(shù) 本片blog記錄d3坐標(biāo)軸入門(mén)，使用版本v5.9.2 SVG如何實(shí)現(xiàn)坐標(biāo)軸 d3生成的坐標(biāo)圖是通過(guò)svg的path(路徑)元素 + g + lin...

Karuru 2019-08-23 16:43 評(píng)論0 收藏0
11個(gè)React Native 組件庫(kù)和 Javascript 數(shù)據(jù)可視化庫(kù)

摘要：數(shù)據(jù)可視化庫(kù)超過(guò)的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來(lái)支持實(shí)際的數(shù)據(jù)可視化。想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 評(píng)論0 收藏0
Vs - 基于 d3.js 和 vue.js 的數(shù)據(jù)可視化

摘要：概述是一個(gè)基于和的數(shù)據(jù)可視化分析包，適用于圖表，制作。目前支持的組件主依賴(lài)安裝使用建議使用搭建環(huán)境，以下只針對(duì)標(biāo)準(zhǔn)環(huán)境。圖及其他圖標(biāo)支持的數(shù)據(jù)類(lèi)型請(qǐng)見(jiàn)項(xiàng)目主頁(yè)。 Vs 概述 Vs 是一個(gè)基于 d3.js 和 vue.js 的數(shù)據(jù)可視化分析包，適用于圖表，dashboard 制作。 Github Repo 目前支持的組件 d3Bar d3Line d3Pie d3ProgressArc...

Acceml 2019-08-22 16:23 評(píng)論0 收藏0
d3.js制作蜂巢圖表帶動(dòng)畫(huà)效果

摘要：高斯模糊濾鏡創(chuàng)建添加模糊濾鏡添加輔助濾鏡添加模糊濾鏡添加輔助濾鏡重點(diǎn)說(shuō)一下最后的，它的作用是把濾鏡效果和原圖混合起來(lái)。 showImg(https://segmentfault.com/img/bVbv2Eu); 以上是效果圖，本圖表使用d3.js v4制作。圖表主要功能是在六邊形格子中顯示數(shù)據(jù)，點(diǎn)擊底部圖標(biāo)可以切換指定格子高亮顯示，圖表可以隨瀏覽器任意縮放。 1.圖表的主體結(jié)構(gòu)是由...

CarterLi 2019-08-26 10:36 評(píng)論0 收藏0