欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

D3.js實現(xiàn)柱狀圖的方法詳解

 更新時間：2016年09月21日 09:15:27   投稿：daisy  
相信大家都知道數(shù)據(jù)可視化就是借助圖形化的手段把生硬的數(shù)據(jù)生動化，以此來展示出數(shù)據(jù)想要表達的信息，而圖表是最通常的一種數(shù)據(jù)可視化手段?？扇孔约杭兪謩泳帉懜鞣N圖表實在是讓人頭疼，各種計算各種煩?，F(xiàn)在就為大家介紹如何用D3.js來實現(xiàn)柱狀圖。

D3.js介紹

D3.js 是一個基于數(shù)據(jù)操作文檔JavaScript庫。D3幫助你給數(shù)據(jù)帶來活力通過使用HTML、SVG和CSS。D3重視Web標(biāo)準(zhǔn)為你提供現(xiàn)代瀏覽器的全部功能，而不是給你一個專有的框架。結(jié)合強大的可視化組件和數(shù)據(jù)驅(qū)動方式Dom操作。這里也可以看到它是用SVG來呈現(xiàn)圖表的，所以使用D3.js是需要一定的SVG基礎(chǔ)的。

如何用D3.js實現(xiàn)柱狀圖？

柱狀圖里面有坐標(biāo)軸和柱子。然而我們還需要SVG畫布來畫這些東西。先把大概的畫圖框架搭起來，代碼如下（請注意此時我在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)建一個分組用來組合要畫的圖表元素
    var main = d3.select('.container svg').append('g')
     // 給這個分組加上main類
     .classed('main')
     // 設(shè)置該分組的transform屬性
     .attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
   };
  </script>
 </body>
</html>

坐標(biāo)軸的實現(xiàn)

為了把真實的數(shù)據(jù)與SVG畫布上的坐標(biāo)軸上的坐標(biāo)聯(lián)系起來，我們需要定義比例尺來描述這樣的對應(yīng)關(guān)系。D3中常用的比例尺有線性比例尺和序數(shù)比例尺，它們的區(qū)別如圖所示：

從圖上可以看出，線性比例尺的對應(yīng)關(guān)系是連續(xù)的，而序數(shù)比例尺的對應(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ù)，每個姓氏對應(yīng)了一個數(shù)值（從這里也可以看出序數(shù)比例尺的定義域上的值不一定是連續(xù)關(guān)系）。d3.scale.ordinal()創(chuàng)建了一個序數(shù)比例尺，而ordinal.domain()設(shè)置了該比例尺的定義域，ordinal.rangRoundBands()設(shè)置了值域。同理，d3.scale.linear()創(chuàng)建了一個線性比例尺，linear.domain()定義定義域，linear.range()定義值域。接著，我們用d3.svg.axis()創(chuàng)建了兩個坐標(biāo)軸，把比例尺應(yīng)用到它們上面，并且用axis.orient()設(shè)置了坐標(biāo)軸的刻度尺的方向。最后，添加SVG元素，用call()把定義好的坐標(biāo)軸與SVG元素聯(lián)系起來。通過設(shè)置它們的transform屬性來移動元素，使它們看起來像是一個坐標(biāo)系。

這里需要注意以下幾點：

     1、ordinal.domain的參數(shù)是一個表示一系列值的數(shù)組，而linear.domain的參數(shù)是一個表示范圍的數(shù)組。

     2、比例尺的本質(zhì)是一個函數(shù)，它接收定義域上的值來得出對應(yīng)的值域上的值。

應(yīng)用序數(shù)比例尺的坐標(biāo)軸與線性比例尺的有很大不同，這里大概說明一下。

  rangeRoundBands(interval, padding, outerPadding)中的padding和outerPadding都是可選的，默認為0。如上圖所示的比例尺的代碼是這樣的。

var o = d3.scale.ordinal()
 .domain([0, 1, 2])
 .rangeRoundBands([0, 100], 0.4, 0.1);

  domain的參數(shù)數(shù)組有多少個元素，就會有多少個rangeBand，rangeBand之間的間隔為padding*step（padding取值范圍為0到1），它與rangeBand的關(guān)系是均分一個step，比如padding為0.4，則rangeBand的長度為0.6*step。根據(jù)上述代碼可得最終坐標(biāo)軸的長度等于(0.1 + 2 + 0.6 + 0.1) * step，由此算出step的長度，再推出外間距、rangeBand、內(nèi)間距的長度。而定義域上的取值刻度定位在每個rangeBand的中間。于是得到了示意圖中的坐標(biāo)軸（紅色標(biāo)注）。

我們接著來畫柱狀圖，給坐標(biāo)軸設(shè)置一下樣式：

.axis path,
.axis line {
 stroke: #000;
 fill: none;
}

最終得到的柱狀圖的坐標(biāo)軸如下圖所示：

柱子的實現(xiàn)

柱子無非就是一個個矩形，在SVG中可以使用rect元素來畫。先選擇到main下所有bar類的元素（此時選擇到的是一個空的集合），把dataset.y綁定到這個集合上，用enter()對比綁定的數(shù)組元素個數(shù)與集合中的SVG元素個數(shù)，與append()搭配使用，會自動補齊至兩邊個數(shù)相等。每一次的append都對應(yīng)dataset.y中的一個數(shù)組元素。利用前面創(chuàng)建的比例尺函數(shù)計算出值并賦給舉行元素的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實現(xiàn)柱狀圖的全部內(nèi)容，感興趣的朋友們可以自己動手實踐下，這樣更利于大家的理解和學(xué)習(xí)，希望這篇文章對大家的學(xué)習(xí)和工作能有所幫助。如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持，小編還會陸續(xù)更新關(guān)于D3.js的文章，請繼續(xù)關(guān)注腳本之家。

相關(guān)文章

最新評論