score:0
it seems to be a bug in nvd3 or d3 itself. my workaround for now is to reload the page with the diagram every 10 min.
var startdatenvd3reload = date.now();
...
var elapsed_time_minutes = (date.now() - startdatenvd3reload)/1000/60;
if (elapsed_time_minutes > 10)
{
location.reload(true);
}
score:2
i kept you fiddle running for 30 mins on one of the chrome tabs while i worked on something else and it crashed.
however if i keep the tab opened such that the tab never looses focus it never crashes and it keeps on working seamlessly.
thus i am assuming that nvd3 does not update the graph but keeps all the update in a collection when the tab is in the blur state that's why the memory goes on increasing. now when the focus is back on the tab it tries to render all the updates and screen freezes and eventually crashes.
now as a fix:
i am using jquery to detect the window on focus:
$(window).focus(function() {
window_focus = true;//set this flag on
}).blur(function() {
window_focus = false;//set this flag off as window is not in display
});
now inside your redraw function
do chart update only when the window is in focus:
if(window_focus){
chart.update();
d3.select('#chart svg')
.datum(data)
//.transition().duration(1500)
.call(chart);
d3.select('.nv-x.nv-axis > g').selectall('g').selectall('text')
.attr('transform', function(d, i, j) {
return 'translate (-40, 40) rotate(315)'
});
nv.tooltip.cleanup();
}
working code here
hope this helps!
Source: stackoverflow.com
Related Query
- nvd3 application memory leak
- nvd3 memory leak when creating a new chart
- Memory leak from repeatedly applying d3 transition
- Why do my svg nodes leak memory in IE
- Memory leak with d3.js keyed join in event handler closure
- three.js memory leak .dispose() not working / wrong usage
- Cannot find D3.js memory leak
- Using d3 transitions causes memory leak
- How do I display dates on the x-axis for nvd3 / d3.js?
- NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly
- nvd3 piechart.js - How to edit the tooltip?
- How to customize color in pie chart of NVD3
- How to disable legend in nvd3 or limit it's size
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- D3js within Java application
- How to disable some streams by default in a nvd3 Simple Line Chart?
- NVD3 Charts not rendering correctly in hidden tab
- nvd3 line chart with string values on x-axis
- How do I change the legend position in a NVD3 chart?
- Correct Way to Import D3.js into an Angular 2 Application
- custom no data label in nvd3 scatter chart
- Having trouble integrating D3.js (collapsible tree) into Angular application
- How to avoid memory leaks using angularjs-nvd3-directives
- Understanding nvd3 x-axis date format
- NVD3 - line chart NaN on safari using latest versions
- NVD3 line chart with realtime data
- javascript charting - nvd3 line chart with two Y-axis
- crossfilter, d3.brush and nvd3 integration
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined
More Query from same tag
- D3js - Getting a line chart drawn, from "JSON data" input using d3.json
- d3 Bar Graph: Trouble seeing my Graph. might be issue with append()
- d3 - draw lines n number of times
- Sorting bar charts in D3
- D3v4 inserting new nodes
- svg, canvas together without using position absolute
- How to load dc.js and crossfilter.js?
- How to read D3 node label text into a div/paragraph element?
- D3js scale chart have x axis in the middle
- Uncaught error reading in json data to d3 force-directed graph
- Create key, value pair for JSON via nest in D3
- Plotting custom json maps with D3.js
- D3js v4 get month and year
- How to simulate mouse move in D3 so when you drag nodes, other nodes move automatically?
- How to convert unix timetamp to date object in D3?
- how to generate a list of successive colors in javascript
- D3js selectAll text
- Updating DOM Node with text overwrites old text
- d3.js & NVD3 axisLabel with a £ (pound) symbol
- D3 Angular chart axis labels
- Render graphs in react-native
- D3.js Interactive Legend Toggling
- How do you label nodes and create arrows in D3?
- How to stop transitions in D3.JS v3
- Angular How to use data from json in c3?
- d3.js - generate color table from array
- D3 JS bar chart, show y-axis label value at the top of the bar
- Aligning two graphs(Pie and Bar) side by side :: d3 js
- d3: Performing .Sort by classes
- Stroke width on d3 v3 line chart