d3 Circle Chart

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

Circle Chart

圆形图是圆形统计图形，它被分成切片以说明数字比例。

Draw a Circle Chart

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

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

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

Here,

Width :SVG的宽度。
Height :SVG的高度。
Data :数据元素数组。
Colors : 将颜色应用于圆形元素。

Step 2 :附加SVG元素:让我们使用以下代码在D3中添加SVG元素。

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

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

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

Here,

var g = svg.selectAll("g") :创建组元素以保存圆圈。

.data(data) :将我们的数据数组绑定到组元素。

.enter() :为我们的组元素创建占位符。

.append("g") :将组元素附加到我们的页面。

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

这里，translate用于相对于原点定位元素。

Step 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];
})

Step 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;
   });