d3.js[v4] 直方圖布局

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

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

直方圖布局

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

數(shù)據(jù)

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

定義兩個映射坐標比例尺

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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93717.html

相關(guān)文章

D3.js可視化前端框架的使用要點

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

MASAILA 2019-08-22 14:57 評論0 收藏0
d3.js 使用坐標軸

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

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

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

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

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

Acceml 2019-08-22 16:23 評論0 收藏0
d3.js制作蜂巢圖表帶動畫效果

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

CarterLi 2019-08-26 10:36 評論0 收藏0