d3.js title above responsive chart with fixed aspect ratio - d3.js

Question

I am very new to programming in d3.js, and I was wondering if someone could help me out with the following:
I have modified a donut chart that I found on the web. I modified it to become responsive while still maintaining an aspect ratio of 1 for the circular donut chart. I was wondering what the best way would be to place a title above or below it. I have tried various approaches but I am unable to create one that works consistently.
Simplified JSFiddle here:
JSFiddle
code also attached here:
var width = 400;
var height = 400;
var x = {
value: 80.43,
color1: "#007EA7",
color2: "#d9d9d9"
};
var margin = {
left: 10,
top: 10,
right: 10,
bottom: 10
};
width = Math.min(width - margin.left - margin.right,
height - margin.top - margin.bottom);
height = width * 1; // Should be a perfect circle.
svg = d3.select("body")
.append("div")
.classed("svg-container", true)
.append("svg")
.attr("preserveAspectRatio", "xMidYMin meet")
.attr("viewBox", "0 0 " + (width) + " " + (height))
.classed("svg-content-responsive", true);
// Below is code to create the actual donut chart. It used the width and height attributes calculated above.
var outerRadius = Math.min(width, height) / 2,
innerRadius = (outerRadius / 5) * 4;
τ = 2 * Math.PI;
fontSize = (Math.min(width, height) / 5);
arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(0);
var background = svg.append("path")
.datum({
endAngle: τ
})
.style("fill", x.color2)
.attr("d", arc)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var text = svg.append("text")
.text(Math.round(x.value * 10) / 10 + '%')
.attr("text-anchor", "middle")
.style("font-size", fontSize + 'px')
.attr("dy", height / 2 + fontSize / 2.5)
.attr("dx", width / 2);
foreground = svg.append("path")
.datum({
endAngle: x.value / 100 * τ
})
.style("fill", x.color1)
.attr("d", arc)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
.svg-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.svg-content-responsive {
width: 100%;
height: 100%;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
Any comments, advise, references or code snippets that might help me are greatly appreciated.
Thanks,
Florian

Answer 1

Is there something wrong with adding something like this:
var title = svg.append("text")
.text('This is the title')
.attr("text-anchor", "middle")
.style("font-size", '12px')
.attr("dy", 10)
.attr("dx", width / 2);
exactly like the text?
PS: adding your approaches that failed would help people answer the question

Answer 2

If anyone stumbles on this question in the future: I decided to place my title below the chart and managed to solve it by slightly cheating.
I used the following CSS:
.svg-container {
height:100%;
width:100%;
min-height: 100%;
position:relative;
}
.svg-content-responsive {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
width: 100%;
position: relative;
padding-bottom: 50px;
}
.svg-gauge-title-container {
width: 100%;
height: 50px;
position:relative;
margin-top:-50px;
}
.svg-gauge-title {
position: relative;
width: 100%;
}
i.e. I added 50px of padding-bottom to the chart, and also added a title container with 50px of margin above. Might not be the cleanest way, but it works.