score:1

Accepted answer

I'm not 100% clear on what you are trying to do. You're attaching the dataset, but you don't seem to be using it.

I'm assuming you want to, so here's an example using the data for the radius. Notice the css: it uses fill for the color not background.

You can also use fill and stroke instead of two circles.

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>

score:0

D3 Donut Chart is a better/flexible/standard approach to draw a donut chart in d3 i.e. using d3 shape -arcs and d3 shapes - pies.

Here's a snippet using the above arc and pie generators and the dataset that you provide and drawing a donut out of it: (I'm using d3.schemeCategory10 to add colors to the arcs.

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>

And adding some more values to the dataset, here's another snippet:

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>

I see that you've accepted an answer but I wanted to let you know about this approach as well which gives a lot of flexibility. Hope this helps too.

score:1

Instead of background in your css you should use fill like this :

fill: rgb(255, 0, 0);

And what is that dataset doing there ? here is a simple doughnut by some edits to your code :

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>


Related Query

More Query from same tag