D3.js - 繪製圖表

上一頁
下一頁

D3.js 用於建立靜態 SVG 圖表。它有助於繪製以下圖表：

  • 條形圖
  • 圓形圖
  • 餅圖
  • 環形圖
  • 折線圖
  • 氣泡圖等。

本章介紹了在 D3 中繪製圖表。讓我們詳細瞭解一下這些圖表。

條形圖

條形圖是最常用的圖表型別之一，用於顯示和比較不同離散類別或組的數量、頻率或其他度量（例如平均值）。該圖的構造方式是，不同條形的高度或長度與它們代表的類別的規模成正比。

x 軸（水平軸）表示不同的類別，它沒有刻度。y 軸（垂直軸）有刻度，它指示測量單位。條形可以垂直或水平繪製，具體取決於類別的數量以及類別長度或複雜性。

繪製條形圖

讓我們使用 D3 在 SVG 中建立一個條形圖。在這個例子中，我們可以使用rect 元素作為條形，並使用text 元素來顯示對應於條形的資料值。

要使用 D3 在 SVG 中建立條形圖，讓我們按照以下步驟操作。

步驟 1 - 在 rect 元素中新增樣式 - 讓我們向 rect 元素新增以下樣式。

svg rect {
   fill: gray;
}

步驟 2 - 在 text 元素中新增樣式 - 新增以下 CSS 類以應用樣式於文字值。將此樣式新增到 SVG text 元素。定義如下：

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

這裡，Fill 用於應用顏色。Text-anchor 用於將文字定位到條形的右側。

步驟 3 - 定義變數 - 讓我們在指令碼中新增變數。解釋如下。

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

這裡，

  • 寬度 - SVG 的寬度。

  • 縮放因子 - 縮放為螢幕上可見的畫素值。

  • 條形高度 - 這是水平條形的靜態高度。

步驟 4 - 追加 SVG 元素 - 讓我們使用以下程式碼在 D3 中追加 SVG 元素。

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

這裡，我們將首先選擇文件主體，建立一個新的 SVG 元素，然後將其追加。我們將在該 SVG 元素內構建我們的條形圖。然後，設定 SVG 的寬度和高度。高度計算為條形高度 * 資料值的數量。

我們取條形高度為 30，資料陣列長度為 4。然後 SVG 高度計算為 barheight* datalength，即 120 px。

步驟 5 - 應用變換 - 讓我們使用以下程式碼在條形中應用變換。

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

這裡，每個條形內部都對應一個元素。因此，我們建立組元素。我們的每個組元素都需要一個接一個地放置以構建水平條形圖。讓我們取一個變換公式 index * 條形高度。

步驟 6 - 將 rect 元素追加到條形 - 在上一步中，我們追加了組元素。現在使用以下程式碼將 rect 元素新增到條形。

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

這裡，寬度為 (資料值 * 縮放因子)，高度為 (條形高度 - 邊距)。

步驟 7 - 顯示資料 - 這是最後一步。讓我們使用以下程式碼在每個條形上顯示資料。

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

這裡，寬度定義為 (資料值 * 縮放因子)。Text 元素不支援填充或邊距。因此，我們需要給它一個“dy”偏移量。這用於垂直對齊文字。

步驟 8 - 工作示例 - 完整的程式碼清單顯示在以下程式碼塊中。建立一個網頁barcharts.html並新增以下更改。

barcharts.html

即時演示 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

現在請求您的瀏覽器，您將看到以下響應。

圓形圖

圓形圖是一種圓形的統計圖形，它被分成多個扇形以說明數值比例。

繪製圓形圖

讓我們使用 D3 在 SVG 中建立一個圓形圖。為此，我們必須遵守以下步驟：

步驟 1 - 定義變數 - 讓我們在指令碼中新增變數。它顯示在下面的程式碼塊中。

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

這裡，

  • 寬度 - SVG 的寬度。

  • 高度 - SVG 的高度。

  • 資料 - 資料元素陣列。

  • 顏色 - 將顏色應用於圓形元素。

步驟 2 - 追加 SVG 元素 - 讓我們使用以下程式碼在 D3 中追加 SVG 元素。

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

步驟 3 - 應用變換 - 讓我們使用以下程式碼在 SVG 中應用變換。

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

這裡，

var g = svg.selectAll(“g”) - 建立組元素以容納圓形。

.data(data) - 將我們的資料陣列繫結到組元素。

.enter() - 為我們的組元素建立佔位符。

.append(“g”) - 將組元素追加到我們的頁面。

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

這裡，translate 用於相對於原點定位元素。

步驟 4 - 追加圓形元素 - 現在，使用以下程式碼將圓形元素追加到組。

g.append("circle")

現在，使用以下程式碼向組新增屬性。

.attr("cx", function(d, i) {
   return i*75 + 50;
})

這裡，我們使用每個圓形中心的 x 座標。我們將圓形的索引乘以 75，並在圓形之間新增 50 的填充。

接下來，我們設定每個圓形中心的 y 座標。這用於統一所有圓形，定義如下。

.attr("cy", function(d, i) {
   return 75;
})

接下來，設定每個圓形的半徑。定義如下：

.attr("r", function(d) {
   return d*1.5;
})

這裡，半徑乘以資料值以及常數“1.5”以增加圓形的大小。最後，使用以下程式碼為每個圓形填充顏色。

.attr("fill", function(d, i){
   return colors[i];
})

步驟 5 - 顯示資料 - 這是最後一步。讓我們使用以下程式碼在每個圓形上顯示資料。

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

步驟 6 - 工作示例 - 完整的程式碼清單顯示在以下程式碼塊中。建立一個網頁circlecharts.html並在其中新增以下更改。

circlecharts.html

即時演示 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

現在，請求您的瀏覽器，以下將是響應。

餅圖

餅圖是一種圓形的統計圖形。它被分成多個扇形以顯示數值比例。讓我們瞭解如何在 D3 中建立餅圖。

繪製餅圖

在開始繪製餅圖之前，我們需要了解以下兩種方法：

  • d3.arc() 方法和
  • d3.pie() 方法。

讓我們詳細瞭解這兩種方法。

d3.arc() 方法 - d3.arc() 方法生成一個弧形。您需要為弧形設定內半徑和外半徑。如果內半徑為 0，則結果將是餅圖，否則結果將是環形圖，這將在下一節中討論。

d3.pie() 方法 - d3.pie() 方法用於生成餅圖。它從資料集獲取資料，並計算餅圖每個扇形的起始角度和結束角度。

讓我們使用以下步驟繪製餅圖。

步驟 1 - 應用樣式 - 讓我們將以下樣式應用於弧形元素。

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

這裡，fill 用於應用顏色。Text-anchor 用於將文字定位到弧形的中心。

步驟 2 - 定義變數 - 在指令碼中定義變數，如下所示。

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

這裡，

  • 寬度 - SVG 的寬度。

  • 高度 - SVG 的高度。

  • 半徑 - 它可以使用 Math.min(width, height) / 2; 函式計算。

步驟 3 - 應用變換 - 使用以下程式碼在 SVG 中應用以下變換。

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

現在使用d3.scaleOrdinal函式新增顏色，如下所示。

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

步驟 4 - 生成餅圖 - 現在，使用下面給出的函式生成餅圖。

var pie = d3.pie()
   .value(function(d) { return d.percent; });

這裡，您可以繪製百分比值。需要一個匿名函式來返回d.percent並將其設定為餅圖值。

步驟 5 - 為餅圖扇形定義弧形 - 生成餅圖後，現在使用下面給出的函式為每個餅圖扇形定義弧形。

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

這裡，此弧形將設定為路徑元素。計算出的半徑設定為 outerradius，而 innerradius 設定為 0。

步驟 6 - 在扇形中新增標籤 - 透過提供半徑在餅圖扇形中新增標籤。定義如下。

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

步驟 7 - 讀取資料 - 這是重要的一步。我們可以使用下面給出的函式讀取資料。

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

這裡，populations.csv包含資料檔案。d3.csv函式從資料集中讀取資料。如果資料不存在，它會丟擲錯誤。我們可以將此檔案包含在您的 D3 路徑中。

步驟 8 - 載入資料 - 下一步是使用以下程式碼載入資料。

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

這裡，我們可以為資料集中每個資料值的資料集的組元素分配資料。

步驟 9 - 追加路徑 - 現在，追加路徑並向組分配一個類“arc”，如下所示。

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

這裡，fill 用於應用資料顏色。它取自d3.scaleOrdinal函式。

步驟 10 - 追加文字 - 要使用以下程式碼在標籤中顯示文字。

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

這裡，SVG text 元素用於在標籤中顯示文字。我們之前使用d3.arc()建立的標籤弧返回一個質心點，它是標籤的位置。最後，我們使用d.data.browser提供資料。

步驟 11 - 追加組元素 - 追加組元素屬性並新增類 title 以對文字進行著色並使其斜體，這在步驟 1 中指定，定義如下。

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

步驟 12 - 工作示例 - 要繪製餅圖，我們可以獲取印度人口的資料集。此資料集在一個虛擬網站上顯示人口，定義如下。

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

讓我們為上述資料集建立餅圖視覺化。建立一個網頁“piechart.html”並在其中新增以下程式碼。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>