Add lines to SVG donut - d3.js

Question

I am working on creating a donut graph like this:
And this is the graph that I have from my JSFiddle.
var τ = 2 * Math.PI,
width = 100,
height = 100,
outerRadius = Math.min(width,height)/2,
innerRadius = (outerRadius/5)*4,
fontSize = (Math.min(width,height)/4);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.cornerRadius(outerRadius - innerRadius)
.startAngle(0);
var svg = d3.select('.chart-container').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
var text = svg.append("text")
.text('0%')
.attr("text-anchor", "middle")
.style("font-size",fontSize+'px')
.attr("dy",fontSize/3)
.attr("dx",2);
var background = svg.append("path")
.datum({endAngle: τ})
.style("fill", "#7cc35f")
.attr("d", arc);
var midground = svg.append("path")
.datum({endAngle: 0 * τ})
.style("fill", "lightblue")
.attr("d", arc);
var foreground = svg.append("path")
.datum({endAngle: 0 * τ})
.style("fill", "#57893e")
.attr("d", arc);
midground.transition()
.duration(750)
.call(arcTween, 0.49 * τ);
foreground.transition()
.duration(750)
.call(arcTween, 0.25 * τ);
function arcTween(transition, newAngle) {
transition.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
text.text(Math.round((d.endAngle/τ)*100)+'%');
return arc(d);
};
});
}
I do not know how to add the four black lines to separate the quarters of the donut. Can anyone give me some insights on how to achieve that?

Answer 1

The pure D3 approach would use something like this:
svg.selectAll("line")
.data(d3.range(0, 360, 90))
.enter().append("line")
.attr("stroke", "black")
.attr("y1", outerRadius)
.attr("y2", innerRadius)
.attr("transform", function(d) { return "rotate(" + d + ")"});
Use d3.range() to create the array of values at which your marks should be placed. For this example this could also be written as [0, 90, 180, 270], but using d3.range() you could easily customize the number of marks to be placed around the perimeter of your donut by adjusting the step denoted by the third parameter. After binding the array, use the enter selection to append the lines to your chart. These require setting only y1 and y2 with x1 and x2 defaulting to 0 as the lines are afterwards rotated to their destination according to the bound values.
Have a look at this working example:
var τ = 2 * Math.PI,
width = 100,
height = 100,
outerRadius = Math.min(width,height)/2,
innerRadius = (outerRadius/5)*4,
fontSize = (Math.min(width,height)/4);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.cornerRadius(outerRadius - innerRadius)
.startAngle(0);
var svg = d3.select('.chart-container').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
var text = svg.append("text")
.text('0%')
.attr("text-anchor", "middle")
.style("font-size",fontSize+'px')
.attr("dy",fontSize/3)
.attr("dx",2);
var background = svg.append("path")
.datum({endAngle: τ})
.style("fill", "#7cc35f")
.attr("d", arc);
var midground = svg.append("path")
.datum({endAngle: 0 * τ})
.style("fill", "lightblue")
.attr("d", arc);
var foreground = svg.append("path")
.datum({endAngle: 0 * τ})
.style("fill", "#57893e")
.attr("d", arc);
midground.transition()
.duration(750)
.call(arcTween, 0.49 * τ);
foreground.transition()
.duration(750)
.call(arcTween, 0.25 * τ);
svg.selectAll("line")
.data(d3.range(0, 360, 90))
.enter().append("line")
.attr("stroke", "black")
.attr("y1", outerRadius)
.attr("y2", innerRadius)
.attr("transform", function(d) { return "rotate(" + d + ")"});
function arcTween(transition, newAngle) {
transition.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
text.text(Math.round((d.endAngle/τ)*100)+'%');
return arc(d);
};
});
}
<script src="https://d3js.org/d3.v3.js"></script>
<div class="chart-container"></div>

Answer 2

you can use this function to calculate and draw the line:
var drawDonutLine = function(angle, overlap){
var overlap = overlap || 0;
angle = angle / (180 / Math.PI);
var innerR = (innerRadius-overlap);
var outerR = (outerRadius+overlap);
var beginX = Math.sin(angle)*innerR
var beginY = -Math.cos(angle)*innerR;
var endX = Math.sin(angle)*outerR;
var endY = -Math.cos(angle)*outerR;
svg.append('path')
.datum({})
.style("fill", "#000")
.attr('stroke', 'black')
.attr('stroke-width', 5)
.attr('d', "M "+beginX+" "+beginY+" L "+endX+" "+endY)
;
}
and use it like, where the first parameter is the angle (in degree), and the second parameter the overlapping in px
drawDonutLine(0,5);
see working example https://jsfiddle.net/2c7ajn8t/3/
I used https://www.dashingd3js.com/svg-paths-and-d3js as reference