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.
Source: stackoverflow.com
Related Query
- Angular D3js pie chart disappears after routing
- Rect in in d3js svg disappears after routing to another page in AngularJS
- d3js Redistributing labels around a pie chart
- d3js pie graph from jquery ajax - correlating json keys and values on the chart
- d3js json pie chart
- angular nvd3 duration not affect pie chart
- Highlight pie chart on hover d3js
- d3js Pie chart gradient
- Unable to position tooltip on d3.js pie chart in Angular
- multi-ring pie chart using d3js
- D3js pie chart not showing up on localhost
- D3Js Bar Chart Bars Starting Way After beginning of X-Axis
- d3js angular directive for area chart using d3.mouse event for tooltip
- D3 Pie Chart new path values not being calculated after update
- make a simple pie chart directive with d3js
- Animate Pie Chart in Angular
- d3js v4 can't remove old data chart after update
- D3js - Add transparent gap between path in pie chart
- D3 PIE chart animate on enter and update angular app
- D3 Pie Chart Render Only Once In Side *NgFor Angular
- How to build a simple Donut Chart using D3js and Angular 7
- d3js animated pie chart using json
- how do I set up a grouping query on the server side. I want set up the query so I can use it for a pie chart in front end, using d3js
- Add text at end of needle of Half pie chart - D3 with Angular
- D3 with Angular - Half Pie chart Chart colors sequence
- Javascript D3js pie chart
- Build pie chart with sectors d3js
- How to update percent values of custom tooltip in angular nvd3 pie chart
- d3 angular 2 pie chart d3.arc type error
- Render a d3 pie chart in angular with angular-nvd3
More Query from same tag
- d3 : coloring dots on a scatterplot using column in dataset
- Rotate tree diagram on d3.js v5 (from horizental to vertical)
- Custom the scale function in d3.js
- d3.json getting 'Uncaught SyntaxError: missing ) after argument list'
- How to use json data instead of tsv file in d3 multi line charts?
- How can I bind data.key --> element.id on existing markup in d3js?
- How to display percentage to the d3.js piechart
- D3 Choropleth, get element with zoom/view
- Remove minus sign from the the negative values of the secondary x-axis
- D3 Parent Node index parameter returning Zero for additional enter() data
- set initial zoom level at d3.js tree (dynamically)
- Basic four quadrant plot in DimpleJS (D3)
- How to add a click event on nvd3.js graph
- Search for an element in D3 - force layout or tree
- D3.js: Having some problems understanding the delay-call functionality and chaining in Bostock's sortable bar chart example
- Append child only to new elements, D3.js
- Clicking on node in dagre-d3
- Connect childs of a D3.js tree diagram if they have the same value
- D3.js Line Chart Error: Invalid value for <path> attribute d="MNaN,NaNLNaN
- Multi-layer SankeyNetwork (NetworkD3) does not plot in R
- How do bind inner query results from service.js to outer variable in Angular.js directive?
- D3 Transition. Working with multiple lines on line graph and would like to transition smoothly between lines when button is pressed
- Align text element to middle in treemap
- javascript d3 selectAll transform to loop
- D3 radial force layout
- D3.js SVG giving it an ID or adding the SVG to PDF
- D3 Map Projection Not Showing Map
- I want to update the data on this d3.js bar chart by clicking a button. (onclick)
- Applying JQuery Mobile's style to function
- Formatting the jquery slider tool tip text