Javascript 如何画油炸圈饼？

请帮我修复代码。我使用D3V5.7.0并尝试绘制甜甜圈

现场演示

我的代码在这里：

const dataset = [
  [ 5,   3 ]
];


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

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("class", "outer-circle")
   .attr("cx", 110)
   .attr("cy", 110)
   .attr("r", 10);

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("class", "inner-circle")
   .attr("cx", 110)
   .attr("cy", 110)
   .attr("r", 5);   

---

但浏览器只显示一个黑色圆圈。它的问题

我不是100%清楚你想做什么。您正在附加数据集，但似乎没有使用它

我假设你想，这里是一个使用半径数据的例子。注意css：它对颜色使用

填充

，而不是

背景

您也可以使用

填充

和

笔划

代替两个圆

const数据集=[5,3]；
const svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
svg.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，110）
.attr（“cy”，110）
.attr（“r”，函数（d）{返回d*5}）
.attr（“类”，函数（d，i）{
返回i？“内圈”：“外圈”
})

svg{
背景：青色；
}
.内圈{
填充物：白色；
}
.外圈{
填充物：红色；
}

---

在css中使用填充，而不是背景，如下所示：

fill: rgb(255, 0, 0);

那个数据集在那里做什么？下面是一个简单的甜甜圈，通过对代码进行一些编辑：

const svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
svg.append（“圆”）
.attr（“类”、“外圆”）
.attr（“cx”，110）
.attr（“cy”，110）
.attr（“r”，10）
svg.append（“圆”）
.attr（“类”、“内圈”）
.attr（“cx”，110）
.attr（“cy”，110）
.attr（“r”，5）

svg{
背景：青色；
}
.内圈{
填充：rgb（255255）；
}
.外圈{
填充：rgb（255,0,0）；
}

是在d3中绘制油炸圈饼图的更好/灵活/标准方法，即使用和

下面是一个片段，它使用了上面的圆弧和饼图生成器以及您提供的数据集，并从中绘制了一个甜甜圈：（我正在使用它向圆弧添加颜色

var数据集=[5,3]；
var高度=300，
宽度=800，
半径=数学最小值（宽度、高度）/2；
var colorSchema=d3.schemeCategory10；
var arc=d3.arc（）
.外层（半径-10）
.内半径（半径-40）；
var pie=d3.pie（）
.sort（空）
.value（函数（d）{返回d；}）；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
var g=svg.append（'g'）.attr（'transform'，'translate（'+（宽度/2）+'，'+（高度/2）+'）；
var path=g.selectAll（“.arc”）
.数据（饼图（数据集））
.enter（）.append（'g'）.classed（'arc'，true）；
attr（'fill'，function（d，i）{return colorSchema[i]；}）；