D3.js用于创建静态SVG图表。它有助于绘制以下图表-

• 条形图
• 圆图
• 饼形图
• 甜甜圈图
• 折线图
• 气泡图等

本章说明有关D3中的图表的绘制。让我们详细了解每个。

条形图

条形图是最常用的图形类型之一，用于显示和比较不同离散类别或组的数量，频率或其他度量（例如平均值）。该图以不同条形的高度或长度与它们代表的类别的大小成比例的方式构造。

x轴（水平轴）代表没有刻度的不同类别。 y轴（垂直轴）确实有刻度，它指示测量单位。可以根据类别的数量以及类别的长度或复杂程度垂直或水平绘制条形图。

绘制条形图

让我们使用D3在SVG中创建条形图。对于此示例，我们可以将rect元素用于条形图和文本元素以显示与条形图相对应的数据值。

要使用D3在SVG中创建条形图，请按照以下步骤操作。

步骤1-在rect元素中添加样式-让我们向rect元素中添加以下样式。

svg rect {
   fill: gray;
}

步骤2-在文本元素中添加样式-添加以下CSS类以将样式应用于文本值。将此样式添加到SVG文本元素。它定义如下-

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

在此，“填充”用于应用颜色。文本锚用于将文本定位到条的右端。

步骤3-定义变量-让我们在脚本中添加变量。下面说明。

这里，

• 宽度-SVG的宽度。

• 比例因子-缩放到屏幕上可见的像素值。

• Barheight-这是单杠的静态高度。

步骤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-应用转换-让我们使用以下代码在bar中应用转换。

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

在此，每个内部条形对应一个元素。因此，我们创建组元素。我们的每个组元素都需要一个位于另一个下方，以构建水平条形图。让我们采用一个转换公式索引*条形高度。

第6步–将rect元素附加到栏上-在上一步中，我们附加了group元素。现在，使用以下代码将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; });

此处，宽度定义为（数据值*比例因子）。文本元素不支持填充或边距。因此，我们需要给它一个“ dy”偏移量。这用于垂直对齐文本。

步骤8-工作示例-完整的代码清单显示在以下代码块中。创建一个网页barcharts.html并添加以下更改。

barcharts.html

现在请求您的浏览器，您将看到以下响应。

圆图

圆图是一种圆形统计图形，将其分成多个切片以说明数字比例。

画一个圆图

让我们使用D3在SVG中创建一个圆形图表。为此，我们必须遵循以下步骤-

步骤1-定义变量-让我们在脚本中添加变量。它显示在下面的代码块中。

这里，

• 宽度-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)";
})

在这里，平移用于相对于原点定位元素。

步骤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

现在，请求您的浏览器，然后将是响应。

饼形图

饼图是圆形统计图。将其分成多个切片以显示数值比例。让我们了解如何在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;
}

在此，填充用于应用颜色。文本锚用于将文本定位到弧的中心。

步骤2-定义变量-如下所示在脚本中定义变量。

这里，

• 宽度-SVG的宽度。

• 高度-SVG的高度。

• 半径-它可以使用Math.min（宽度，高度）的函数来计算/ 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);

在此，此弧将设置为路径元素。计算出的半径设置为外半径，而内半径设置为0。

步骤6-在楔形中添加标签-通过提供半径在饼形楔形中添加标签。定义如下。

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

步骤7-读取数据-这是重要的步骤。我们可以使用下面给出的函数读取数据。

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

在这里，人口.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); });

此处，填充用于应用数据颜色。它来自d3.scaleOrdinal函数。

步骤10-附加文本-使用以下代码在标签中显示文本。

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

此处，SVG文本元素用于在标签中显示文本。我们之前使用d3.arc（）创建的标签弧返回一个质心点，这是标签的位置。最后，我们使用d.data.browser提供数据。

步骤11-附加组元素-附加组元素属性并添加类标题以为文本着色并使其变为斜体，这在步骤1中已指定，并在下面进行了定义。

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

步骤12-工作示例-要绘制饼图，我们可以获取印度人口的数据集。该数据集显示虚拟网站中的人口，其定义如下。

人口.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”，并在其中添加以下代码。