空圆环图图表(JS-Javascript)

空圆环图是一种优秀的可视化工具，它用于显示从多个维度汇总统计数据的比例。本文将介绍使用JS与Javascript来创建空圆环图。

准备工作

在开始进行任何代码编写之前，确保你已经将最新版本的D3.js添加到你的项目中。你可以从这个链接D3.js 来下载其最新版本。

HTML 元素的创建

首先，我们需要创建一个 HTML元素用来嵌套我们想要的圆环图，代码片段如下：

<div id="my-svg"></div>

接下来，我们来绘制空圆环图。

空圆环图的代码

我们将会使用以下的Javascript代码来创建空圆环图。

const dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
  oranges: [0, 4656, 18367, 15030, 12337],
};

const width = 600;
const height = 500;
const outerRadius = Math.min(width, height) * 0.5 - 10;
const innerRadius = outerRadius * 0.6;

const svg = d3.select("#my-svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const pie = d3.pie().sort(null).value(d => d3.sum(d3.values(d)));

const arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

const arcs = svg.append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll("arc")
  .data(pie(d3.entries(dataset)))
  .enter()
  .append("g")
  .attr("class", "arc");

arcs.append("path")
  .attr("fill", "#000000")
  .attr("d", arc.outerRadius(outerRadius));

svg.select(".arc").remove();

让我们来分解一下上述代码：

首先，我们声明了一个包含我们要展示的数据的对象，使用Javascript语法声明两个数组apples和oranges。

const dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
  oranges: [0, 4656, 18367, 15030, 12337],
};

在下一行，我们声明一些变量,这些变量的值可以用来定义我们希望实现的空圆环图的大小。

const width = 600;
const height = 500;
const outerRadius = Math.min(width, height) * 0.5 - 10;
const innerRadius = outerRadius * 0.6;

接下来，我们需要创建一个SVG元素来呈现空圆环图。

const svg = d3.select("#my-svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

然后，我们使用D3.js中的pie()函数来计算出我们要呈现的两个数据集中各个部分的占比，以便更好地定义饼图的弧度。

const pie = d3.pie().sort(null).value(d => d3.sum(d3.values(d)));

之后，我们需要创建一个弧生成器来创建我们想要的空圆形弧。

const arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

接下来，我们在SVG中添加弧形路径， 以改变每个部分的大小。

const arcs = svg.append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll("arc")
  .data(pie(d3.entries(dataset)))
  .enter()
  .append("g")
  .attr("class", "arc");

arcs.append("path")
  .attr("fill", "#000000")
  .attr("d", arc.outerRadius(outerRadius));

最后，为了使我们的圆环图不显示任何内容，我们将"arc"类选择器的第一个元素从SVG中删除。

svg.select(".arc").remove();

结束语

这份简短的Javascript代码与基本的HTML元素就能创建出一个空圆环图。 通过细微的样式编辑，这个空圆环图可以充实起来，从而让用户更方便地查看数据。