In my angular application, I am trying to customize the width and height of div elements in d3 when I select a legend. Strangely, I am able to adjust the width and height of the svg element without any issues. Here is the issue illustrated:
https://i.sstatic.net/YOd4D.png
https://i.sstatic.net/LDiVl.png
Below is the current code snippet that I am working with:
buildSvg() {
this.host.html('').attr('class', 'host');
this.svg = d3
.select('.host')
.append('svg')
.attr('width', this.size[0])
.attr('height', this.size[1])
.attr('class', 'pie-chart')
.append('g')
.attr('transform', `translate(${this.size[0] / 2},${this.size[1] / 2})`)
.attr('class', 'pie-content');
this.legend = d3
.select('.host')
.append('div')
.attr('class', 'legend');
d3.select('.legend')
.attr('width', this.size[0])
.attr('height', this.size[1]);
}