d3.js: How to add value below the label in donut chart

Question

I am new to d3.js and what I have achieved till now is, this using tutorials and videos.

Now I am trying to add the dataset.value below the label text as shown in the figure.

var dataset = [{
  label: 'On trip',
  value: 35
}, {
  label: 'parked',
  value: 65 
}];

How do I achieve this?

Answer 1

You can update your append text code with following code.

text.enter()
 .append("text")
 .attr("dy", ".35em")
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 0)
 .text(function(d) { return d.data.label; })
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 20)
 .text(function(d) { return d.data.value; });

Append two tspan to your text element

Updated Fiddle here