主页 经验

d3 Circle Chart


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,

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;
   });
上一个 d3 Bar Chart 文章列表 下一个 d3 Pie Chart

© 2019-2021 适观科技

沪ICP备17002269号