can't display two d3 charts at the same time in my angular app

I just added a second d3 chart as own component (like my first one) into my angular project. When I tried to display both on one of my pages, just the second one will (which needs some time to render) will stay on the page. The first one is barerly visible for about an half a second.

For both charts I created own components in which the charts (svgs) get appended to an own div with an unique id. I access the divs using ViewChild

I already tried to give both svg which will be rendered an unique svg id and variable name, like here:

const svgDoughnut = d3
.select(containerEl)
.append("svg")
.attr("width", containerEl.offsetWidth)
.attr("height", containerEl.offsetHeight)
.attr("id", "svgDoughnutChart")
.attr(
"viewBox",
-containerEl.offsetWidth / 2 +
" " +
-containerEl.offsetHeight / 2 +
" " +
containerEl.offsetWidth +
" " +
containerEl.offsetHeight
);


or here:

const element = this.lineChartContainer.nativeElement;
const svgLine = d3
.select(element)
.append("svg")
.attr("id", "svgLineChart")
.attr("width", element.offsetWidth)
.attr("height", element.offsetHeight);


But that didn't make any difference.

Continue reading...