nvd3 lineWithFocusChart Invalid value error when resizing

Question

LineChart with time scale d3.time.format will resize fluidly with window. lineWithFocusChart never has errors on draw, but while resizing it throws many:

d3.js:8756 Error: Invalid value for <rect> attribute width="NaN"

Sometimes the error stops on mouseup, but many times it keeps throwing after resize is done, which amounts to a memory leak.

I am looking for a working example of this chart type showing date/time in responsive layout, or recommended method for handling time data with focus brush resizing.

Things I have tried:

using parseDate() on my data - no change
use different timescale - no change
set chart transition to 0 - no change

the dates are Javascript date objects - ie new Date() resizing using nvd3:

                nv.utils.windowResize(function () {
                    chart.update();
                });

davidjmcclelland davidjmcclelland · Accepted Answer · 2016-04-18T15:14:50

workaround with newest nvd3:

chart.focusEnable( false );
chart.update();
chart.focusEnable( thisWidget.showZoomStrip );

Where thisWidget.showZoomStrip is my local setting for displaying the brush so this works for regular line chart. This is possible because newest (1.8.2) combined the LineChart and LineWithFocusChart, so I can turn off the brush while resizing.

nvd3 lineWithFocusChart Invalid value error when resizing

1 Answers