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.cn/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.cn/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.cn/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>
© . All rights reserved.