D3.js實(shí)現(xiàn)柱狀圖的方法詳解
D3.js介紹
D3.js 是一個(gè)基于數(shù)據(jù)操作文檔JavaScript庫。D3幫助你給數(shù)據(jù)帶來活力通過使用HTML、SVG和CSS。D3重視Web標(biāo)準(zhǔn)為你提供現(xiàn)代瀏覽器的全部功能,而不是給你一個(gè)專有的框架。結(jié)合強(qiáng)大的可視化組件和數(shù)據(jù)驅(qū)動(dòng)方式Dom操作。這里也可以看到它是用SVG來呈現(xiàn)圖表的,所以使用D3.js是需要一定的SVG基礎(chǔ)的。
如何用D3.js實(shí)現(xiàn)柱狀圖?
柱狀圖里面有坐標(biāo)軸和柱子。然而我們還需要SVG畫布來畫這些東西。先把大概的畫圖框架搭起來,代碼如下(請(qǐng)注意此時(shí)我在body標(biāo)簽里添加了D3.js的script標(biāo)簽。這樣我們后面才能使用D3的方法):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>柱狀圖</title> <style> .container { margin: 30px auto; width: 600px; height: 300px; border: 1px solid #000; } </style> </head> <body> <div class="container"> <svg width="100%" height="100%"></svg> </div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> <script> window.onload = function() { var width = 600, height = 300; // SVG畫布邊緣與圖表內(nèi)容的距離 var padding = { top: 50, right: 50, bottom: 50, left: 50 }; // 創(chuàng)建一個(gè)分組用來組合要畫的圖表元素 var main = d3.select('.container svg').append('g') // 給這個(gè)分組加上main類 .classed('main') // 設(shè)置該分組的transform屬性 .attr('transform', "translate(" + padding.top + ',' + padding.left + ')'); }; </script> </body> </html>
坐標(biāo)軸的實(shí)現(xiàn)
為了把真實(shí)的數(shù)據(jù)與SVG畫布上的坐標(biāo)軸上的坐標(biāo)聯(lián)系起來,我們需要定義比例尺來描述這樣的對(duì)應(yīng)關(guān)系。D3中常用的比例尺有線性比例尺和序數(shù)比例尺,它們的區(qū)別如圖所示:
從圖上可以看出,線性比例尺的對(duì)應(yīng)關(guān)系是連續(xù)的,而序數(shù)比例尺的對(duì)應(yīng)關(guān)系是離散的。分析柱狀圖的展現(xiàn)意義可以得出x軸應(yīng)該選用序數(shù)比例尺,而y軸選用線性比例尺。
// 模擬數(shù)據(jù) var dataset = { x: ["趙","錢","孫","李","周","吳","鄭","王"], y: [40, 30, 50, 70, 90, 20, 10, 40] }; // 定義x軸的比例尺(序數(shù)比例尺) var xScale = d3.scale.ordinal() .domain(dataset.x) .rangeRoundBands([0, width - padding.left - padding.right],0,0); // 定義y軸的比例尺(線性比例尺) var yScale = d3.scale.linear() .domain([0, d3.max(dataset.y)]) .range([height - padding.top - padding.bottom, 0]); // 定義x軸和y軸 var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom'); var yAxis = d3.svg.axis() .scale(yScale) .orient('left'); // 添加坐標(biāo)軸元素 main.append('g') .attr('class', 'axis') .attr('transform', 'translate(0,' + (height - padding.bottom - padding.top) + ')') .call(xAxis); main.append('g') .attr('class', 'axis') .call(yAxis);
我們模擬了一些數(shù)據(jù),每個(gè)姓氏對(duì)應(yīng)了一個(gè)數(shù)值(從這里也可以看出序數(shù)比例尺的定義域上的值不一定是連續(xù)關(guān)系)。d3.scale.ordinal()
創(chuàng)建了一個(gè)序數(shù)比例尺,而ordinal.domain()
設(shè)置了該比例尺的定義域,ordinal.rangRoundBands()
設(shè)置了值域。同理,d3.scale.linear()
創(chuàng)建了一個(gè)線性比例尺,linear.domain()
定義定義域,linear.range()定義值域。接著,我們用d3.svg.axis()
創(chuàng)建了兩個(gè)坐標(biāo)軸,把比例尺應(yīng)用到它們上面,并且用axis.orient()
設(shè)置了坐標(biāo)軸的刻度尺的方向。最后,添加SVG元素,用call()把定義好的坐標(biāo)軸與SVG元素聯(lián)系起來。通過設(shè)置它們的transform屬性來移動(dòng)元素,使它們看起來像是一個(gè)坐標(biāo)系。
這里需要注意以下幾點(diǎn):
1、ordinal.domain
的參數(shù)是一個(gè)表示一系列值的數(shù)組,而linear.domain
的參數(shù)是一個(gè)表示范圍的數(shù)組。
2、比例尺的本質(zhì)是一個(gè)函數(shù),它接收定義域上的值來得出對(duì)應(yīng)的值域上的值。
應(yīng)用序數(shù)比例尺的坐標(biāo)軸與線性比例尺的有很大不同,這里大概說明一下。
rangeRoundBands(interval, padding, outerPadding)
中的padding和outerPadding都是可選的,默認(rèn)為0。如上圖所示的比例尺的代碼是這樣的。
var o = d3.scale.ordinal() .domain([0, 1, 2]) .rangeRoundBands([0, 100], 0.4, 0.1);
domain的參數(shù)數(shù)組有多少個(gè)元素,就會(huì)有多少個(gè)rangeBand,rangeBand之間的間隔為padding*step
(padding取值范圍為0到1),它與rangeBand的關(guān)系是均分一個(gè)step,比如padding為0.4,則rangeBand的長度為0.6*step。根據(jù)上述代碼可得最終坐標(biāo)軸的長度等于(0.1 + 2 + 0.6 + 0.1) * step,由此算出step的長度,再推出外間距、rangeBand、內(nèi)間距的長度。而定義域上的取值刻度定位在每個(gè)rangeBand的中間。于是得到了示意圖中的坐標(biāo)軸(紅色標(biāo)注)。
我們接著來畫柱狀圖,給坐標(biāo)軸設(shè)置一下樣式:
.axis path, .axis line { stroke: #000; fill: none; }
最終得到的柱狀圖的坐標(biāo)軸如下圖所示:
柱子的實(shí)現(xiàn)
柱子無非就是一個(gè)個(gè)矩形,在SVG中可以使用rect元素來畫。先選擇到main下所有bar類的元素(此時(shí)選擇到的是一個(gè)空的集合),把dataset.y綁定到這個(gè)集合上,用enter()
對(duì)比綁定的數(shù)組元素個(gè)數(shù)與集合中的SVG元素個(gè)數(shù),與append()
搭配使用,會(huì)自動(dòng)補(bǔ)齊至兩邊個(gè)數(shù)相等。每一次的append都對(duì)應(yīng)dataset.y中的一個(gè)數(shù)組元素。利用前面創(chuàng)建的比例尺函數(shù)計(jì)算出值并賦給舉行元素的x、y屬性。具體的代碼如下:
// 矩形之間的間距 var rectMargin = 10; // 添加矩形 main.selectAll('.bar') .data(dataset.y) .enter() .append('rect') .attr('class', 'bar') .attr('x', function(d, i) { return xScale(dataset.x[i]) + rectMargin; }) .attr('y', function(d, i) { return yScale(d); }) .attr('width', xScale.rangeBand() - 2*rectMargin) .attr('height', function(d, i) { return height - padding.top - padding.bottom - yScale(d); }) .attr('fill', function(d, i) { return getColor(i); });
至此,得到了如下圖所示的柱狀圖。
總結(jié)
以上就是利用D3.js實(shí)現(xiàn)柱狀圖的全部?jī)?nèi)容,感興趣的朋友們可以自己動(dòng)手實(shí)踐下,這樣更利于大家的理解和學(xué)習(xí),希望這篇文章對(duì)大家的學(xué)習(xí)和工作能有所幫助。如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持,小編還會(huì)陸續(xù)更新關(guān)于D3.js的文章,請(qǐng)繼續(xù)關(guān)注腳本之家。
- JavaScript canvas基于數(shù)組生成柱狀圖代碼實(shí)例
- JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例
- angularjs實(shí)現(xiàn)柱狀圖動(dòng)態(tài)加載的示例
- 利用D3.js實(shí)現(xiàn)最簡(jiǎn)單的柱狀圖示例代碼
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼
- Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
- JS使用canvas技術(shù)模仿echarts柱狀圖
相關(guān)文章
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實(shí)例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實(shí)現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10Javascript前端事件循環(huán)機(jī)制詳細(xì)講解
單線程的同步等待極大影響效率,任務(wù)不得不一個(gè)一個(gè)等待執(zhí)行,對(duì)于網(wǎng)頁應(yīng)用是無法接受的。所以Javascript使用事件循環(huán)機(jī)制來解決異步任務(wù)的問題。本文就來講講Javascript的事件循環(huán)機(jī)制,希望對(duì)你有所幫助2022-12-12JavaScript實(shí)現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法,涉及javascript實(shí)現(xiàn)數(shù)制轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2015-06-06相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08Bootstrap中的fileinput 多圖片上傳及編輯功能
這篇文章主要介紹了Bootstrap中的fileinput 多圖片上傳及編輯功能的實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09跟我學(xué)習(xí)javascript的prototype原型和原型鏈
跟我學(xué)習(xí)javascript的prototype原型和原型鏈,感興趣的小伙伴們可以參考一下2015-11-11JS+HTML5手機(jī)開發(fā)之滾動(dòng)和慣性緩動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS+HTML5手機(jī)開發(fā)之滾動(dòng)和慣性緩動(dòng)實(shí)現(xiàn)方法,涉及javascript結(jié)合HTML5特性控制頁面元素的運(yùn)動(dòng)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06