Expanding D3 Pie Chart to fill SVG

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