Question

请帮助我修复代码。我使用D3 v5.7.0，然后尝试绘制甜甜圈。

现场演示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

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

我假设您要这样做，所以这是一个使用半径数据的示例。请注意，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>

Answer 2

而不是CSS的背景，您应该像这样使用fill：

fill: rgb(255, 0, 0);

那个数据集在那里做什么？这是对代码进行一些编辑后的简单甜甜圈：

const svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500);

svg.append("circle")
   .attr("class", "outer-circle")
   .attr("cx", 110)
   .attr("cy", 110)
   .attr("r", 10)

svg.append("circle")
   .attr("class", "inner-circle")
   .attr("cx", 110)
   .attr("cy", 110)
   .attr("r", 5)

svg {
  background: cyan;
}

.inner-circle {
  fill: rgb(255,255,255);
}

.outer-circle {
  fill: rgb(255,0,0);
}

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

Answer 3

D3 Donut Chart是在d3中绘制甜甜圈图的一种更好/灵活/标准的方法，即使用d3 shape -arcs和d3 shapes - pies。

以下是使用上述弧线和饼图生成器以及您提供的数据集并从中绘制甜甜圈的代码段：（我正在使用d3.schemeCategory10向弧线添加颜色。

var dataset = [5, 3];

var height = 300,
	width = 800,
  radius = Math.min(width, height)/2;
  
var colorSchema = d3.schemeCategory10;

var arc = d3.arc()
	.outerRadius(radius-10)
  .innerRadius(radius-40);
  
var pie = d3.pie()
	.sort(null)
  .value(function (d)  { return d; });
  
var svg = d3.select('body').append('svg')
	.attr('width', width)
  .attr('height', height);
  
var g = svg.append('g').attr('transform', 'translate('+(width/2)+','+(height/2)+')');

var path = g.selectAll('.arc')
	.data(pie(dataset))
  .enter().append('g').classed('arc', true);

path.append('path').attr('d', arc).attr('fill', function(d, i) { return colorSchema[i];});

<script src="https://d3js.org/d3.v5.min.js"></script>

并向数据集中添加更多值，这是另一个片段：

var dataset = [5, 3, 10, 20, 8];

var height = 300,
	width = 800,
  radius = Math.min(width, height)/2;
  
var colorSchema = d3.schemeCategory10;

var arc = d3.arc()
	.outerRadius(radius-10)
  .innerRadius(radius-40);
  
var pie = d3.pie()
	.sort(null)
  .value(function (d)  { return d; });
  
var svg = d3.select('body').append('svg')
	.attr('width', width)
  .attr('height', height);
  
var g = svg.append('g').attr('transform', 'translate('+(width/2)+','+(height/2)+')');

var path = g.selectAll('.arc')
	.data(pie(dataset))
  .enter().append('g').classed('arc', true);

path.append('path').attr('d', arc).attr('fill', function(d, i) { return colorSchema[i];});

<script src="https://d3js.org/d3.v5.min.js"></script>

我看到您已经接受了答案，但是我也想让您知道这种方法，它具有很大的灵活性。希望这也会有所帮助。

如何画甜甜圈？

3 个答案: