d3 Pie Chart

时间: 2021-07-19 15:19:07

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

Pie Chart

饼图是圆形统计图。 它被分成片来显示数字比例。 让我们了解如何在D3中创建饼图。

Draw a Pie Chart

在开始绘制饼图之前，我们需要了解以下两种方法:

• d3.arc（）方法

• d3.pie()方法

让我们详细了解这两种方法。

d3.arc（）方法:d3.arc（）方法生成一个弧。 您需要为弧设置内半径和外半径。 如果内半径为0，则结果将为饼图，否则结果将为圆环图，将在下一节中讨论。

d3.pie（）方法:d3.pie（）方法用于生成饼图。 它从数据集中获取数据并计算饼图的每个楔形的起始角度和结束角度。

让我们使用以下步骤绘制饼图。

Step 1 :应用样式:让我们将以下样式应用于arc元素。

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

.arc path {
   stroke: #fff;
}

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

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

定义变量:在脚本中定义变量，如下所示:

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

Here,

• Width : SVG的宽度。

• Height :SVG的高度。

• Radius:它可以使用Math.min（width，height）/ 2的函数计算;

Step 3:应用转换:使用以下代码在SVG中应用以下转换。

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

现在使用d3.scaleOrdinal函数添加颜色，如下所示。

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

Step 4 :生成饼图:现在，使用下面给出的函数生成饼图。

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

在这里，您可以绘制百分比值。 返回d.percent并将其设置为饼值需要匿名函数。

Step 5 :Define arcs for pie wedges :在生成饼图后，现在使用下面给出的函数为每个饼楔定义弧。

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

这里，该弧将被设置为路径元素。 计算出的半径设置为outerradius，而innerradius设置为0。

Step 6 : Add labels in wedges :通过提供半径来添加饼图中的标签。 它的定义如下。

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

Step 7 :Read data:这是重要的一步。 我们可以使用下面给出的函数读取数据。

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

population.csv包含数据文件。 d3.csv函数从数据集中读取数据。 如果数据不存在，则会引发错误。 我们可以在D3路径中包含此文件。

下一步是使用以下代码加载数据。

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

在这里，我们可以为数据集中的每个数据值的组元素分配数据。

Step 9: Append path: 现在，追加路径并将一个类'arc'分配给组，如下所示。

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

这里，fill用于应用数据颜色。 它取自d3.scaleOrdinal函数。

Step 10 : Append text :使用以下代码在标签中显示文本。

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提供数据。

Step 11:Append group elements:附加组元素属性并添加类标题以使文本着色并使其变为斜体，这在步骤1中指定并在下面定义。

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