Expanding D3 Pie Chart to fill SVG - d3.js

Question

I am trying to achieve two things:
Make the existing pie chart in my application fill the available SVG
element it is rendered in.
Make the SVG element fill the size of the containing div it sits in
so it is responsive.
In my bar charts I achieve this by setting ScaleLinear and ScaleBand ranges on the X and Y scale but this doesn't seem to be an option within the pie charts (and then setting the SVG element to a height and width of 100%).
Code:
export default Component.extend({
tagName: 'svg',
attributeBindings: ['width, height'],
classNameBindings: ['baseClass'],
a: null,
baseClass: 'pie-chart',
color: null,
data: null,
labelArc: null,
height: 400,
radius: null,
svg: null,
width: 400,
donutwidth: 75,
setSvg() {
const {
height,
baseClass,
width,
} = this.getProperties(
'height',
'baseClass',
'width'
);
const svg = select(`.${baseClass}`)
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${width/2}, ${height/2})`);
this.set('svg', svg);
},
_setG(svg, p) {
return svg.selectAll('arc')
.data(p)
.enter()
.append('g')
.attr('class', 'arc');
},
_setPie(data) {
const p = pie().padAngle(0.02).value((d) => d.count)(data);
return p;
},
// Template
<svg width='100%' height='100%'></svg>
Any help is gratefully appreciated

Answer 1

I found i needed to set the initial margins to pad the SVG, then calculate max and min values for pie elements using the available svgWidth data
var margin = {top: 20, right: 100, bottom: 30, left: 40};
var svgWidth = window.innerWidth - (window.innerWidth/4);
var width = svgWidth,
height = (Math.min(width) / 2) + 100,
radius = Math.min(width, height) / 3;
var oRadius = radius, //var holding value for the outer radius of the arc
iRadius = Math.min(width, height) / 4, //var holding the value for the inner radius of the arc
cRadius = 8; //var holding the value for the corner radius of the arc
var piePad = 5;
///////////////////////////////////////////////////////////////
////// Graphing Function
///////////////////////////////////////////////////////////////
function graph(_selection) {
_selection.each(function(data) {
var pie = d3.pie()
.padAngle(.01)
.sort(null)
.value(function(d) {
// console.log(d.value.value)
return d.value.value;
});
///////////////////////////////////////////////////////////////
////// Scales
///////////////////////////////////////////////////////////////
var max = d3.max(data, function(d) { return d.value; });
var min = d3.min(data, function(d) { return d.value; });
var colorScale = setColorScale(max);
///////////////////////////////////////////////////////////////
////// Pie Vars
///////////////////////////////////////////////////////////////
var pie = d3.pie()
.padAngle(.01)
.value(function(d) {return d.value;})
// .value(function(d) { return d[1]; })
.sort(null);
var arc = d3.arc()
.padRadius(oRadius + piePad)
.outerRadius(oRadius - piePad)
// .innerRadius(radius - (radius/2.piePad));
.innerRadius(iRadius);
// .cornerRadius(cRadius);
var outerArc = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
// .cornerRadius(cRadius);
var arcOut = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(iRadius - piePad*4)
.outerRadius(oRadius - piePad);
// .cornerRadius(cRadius);
var arcOver = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(iRadius - piePad*2)
.outerRadius(oRadius - piePad*2);
///////////////////////////////////////////////////////////////
////// Build Initial SVG
///////////////////////////////////////////////////////////////
if (!svg){
svg = d3.select(this).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("class", "donut-group")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
}
///////////////////////////////////////////////////////////////
////// Add paths for pie
///////////////////////////////////////////////////////////////
var path = svg.selectAll("path").data(pie(data));
path.enter()
.append("path")
.attr("class",animatePathIn)
/// rest of path code
} // end graph
return graph;
}