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
- when new dropdown filter is chosen, selected lines in chart don't remain consistent
- Setting specific zoom levels in d3?
- d3.js add second label to bar chart
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- D3 + Angular 4 + chrome not able to read JSON file from local IP
- D3.js - Parallel coordinates - Change color of axis on brush
- d3.js how to set y-axis fixed position
- How to remove data cleanly before updating d3.js chart?
- d3js timeseries - svg path has huge values
- d3 How to properly update svg circle radius in a zoomed map?
- Grunt / NPM Uglify doesn't like this JS line
- Getting color from external image using JavaScript
- How to combine two d3 objects into one for bulk operations
- D3JS Map Citiy Circles
- d3js drag svg:g item move before drag
- d3 selection issue offsetParent is null
- Remove the arrow of an edge
- d3.js PopUp window with mouseout and mouseover
- How to tell when a D3 force layout has stopped
- Hitting browser "back" button shows JSON rather than HTML (using Rails & d3.js)
- Add images to d3 chord diagram
- Can I move an SVG element between SVG groups, in d3.js
- D3 expand force network by clicks - not working
- SVG - rect with left rounded corners
- what scale to use for representing years only on x axis in d3 js
- json passing to D3
- Visualizing polynomial functions with d3.js
- Drag not working correctly after node transition, D3
- How to reduce fragmentation data in d3?
- d3 line chart not showing data - based of tutorial