score:0

Accepted answer

as suggested in comments, the problem wasn't d3.js or svg in general, but related to this issue.

in my case, i was missing a trackby function on a ngfor, which was leading to reload components several times.

correcting it fixed my issue, but didn't totally explain why it was disappearing and not just reloading. i found out that i was missing few things to do it properly, in one word : ngondestroy.

i added this to my code, so that it won't disappear if reloaded :

export class chartcomponent implements afterviewinit, onchanges, ondestroy {
    @viewchild('donutref', { static: true}) donutref: elementref; // <--- top div of this component
    [......]
    svg: any; // <--- this.svg = d3.select('#donut-' + id).append('svg') when initialising the chart
    [......]

    public ngondestroy() {
        this.svg.remove();
        this.donutref.nativeelement.remove();
    }
    [......]
}

i hope this can help if anyone encouters this kind of issue.


Related Query

More Query from same tag