javascript - 如何画 donut ？

Question

请帮我修改代码。我使用 D3 v5.7.0 并尝试绘制 donut 。

现场演示 is here.

我的代码在这里:

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

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

Answer 1

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

我假设您想要，下面是一个使用半径数据的示例。注意 css:它使用 fill 作为颜色而不是 background。

您还可以使用 fill 和 stroke 来代替两个圆圈。

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("cx", 110)
   .attr("cy", 110)
   .attr("r", function(d) { return d * 5})
   .attr("class", function(d, i) {
      return i ? "inner-circle": "outer-circle"
      })
   

svg {
  background: cyan;
}

.inner-circle {
  fill: white;
}

.outer-circle {
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>