Slow performance in latest chrome version

[kienluu]

The StackedAreaChart performs really slowly in the latest version of Chrome with '''useInteractiveGuideline''' set to false. This can be seen in the 'livecode' page in your website at http://nvd3.org/livecode/index.html and then clicking on the StackedAreaChart and then going to the 'Chart code' tab and changing '''useInteractiveGuideline''' to false like below:

nv.addGraph(function() {
  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .clipEdge(true)
                .useInteractiveGuideline(false)
                ;

You can see the performance difference between having '''useInteractiveGuideline''' true and false if you start hovering your mouse around the chart or scroll the page up and down.

There are no performance issues in Firefox and yesterdays version of Chrome (tried with other people still on older version of Chrome and then they update and rendering is slow).

This is discovered by us because we have had no performance issues with our charts until today when pages were no longer loading because the dataset and number of charts used on our page are literally bought Chrome down to its knees and it just crashes. But simply setting '''useInteractiveGuideline''' to true will make it snappy again.

[ghost]

I'm running on Chrome version 37.0.2062.120 on Windows 7 and it seems fine to me..

[kienluu]

Forgot to mention I am on a Mac. I'm using chrome version 38.0.2125.101
On 9 Oct 2014 19:25, "David Jeong" notifications@github.com wrote:

I'm running on Chrome version 37.0.2062.120 on Windows 7 and it seems fine
to me..

—
Reply to this email directly or view it on GitHub
#691 (comment).

[defessler]

I am having the same issue. I seem to have this issue with any NVD3 graphs with a lot of path elements. This seems to be the most apparent on line with focus but it can happen on any line graph with a lot of data points. http://nvd3.org/examples/lineWithFocus.html

I am also on mac but I've tested on Windows 7 and Windows 8.1. If I downgrade to Chrome 37 everything is fine but as soon as I move to Chrome 38 it starts chugging.

UPDATE
When setting useInteractiveGuidelines to true it sets useVoronoi to false which seems to use circle elements instead of path elemtns which is a nice work around for whatever issue was introduced in Chrome 38. Calling d3.rebind('useVoronoi'); and chart.useVoronoi(false); is how I made this change.

d3.rebind('useVoronoi');
chart.useVoronoi(false);

[jstrength]

Actually all you need to do is turn off the clipVoronoi feature, which will turn off the circle elements like @defessler said. This way you still get the cool Voronoi feature.

d3.rebind('clipVoronoi');
chart.clipVoronoi(false);

[sherin]

I am also having this problem!! We are using line charts and the problem is specifically for chrome 38. I think it's been a consistently reproducible problem (at-least on mac).

#702

[ghost]

Chrome bug on this issue: https://code.google.com/p/chromium/issues/detail?id=423749

[jstrength]

I think that this issue is also related: https://code.google.com/p/chromium/issues/detail?id=391604

[ghost]

Using: d3.rebind('useVoronoi'); chart.useVoronoi(false); as suggested fixed things for me for line charts.

I have not found a workaround for stacked area charts, does anyone have an idea?

[defessler]

I haven't tried it with stacked area charts but I imagine its the same issue. I am not sure if you've tried but you may have to edit the chart in the lib directly in order to implement that on some of the charts.

[ClaytonJY]

I'm too unfamiliar with hacking javascript to know how to implement the fix outlined above, but googling around made clipVoronoi look like a normal chart property, prompting me to try the following

myChart$chart(useVoronoi=FALSE)

which totally worked! Is there something preventing that from being a good fix in other cases, necessitating the direct javascript call and rebinding?

[defessler]

You can edit some of the chart options externally as long as they are exposed for that specific chart. I haven't looked through all the charts to see what was exposed but for the charts I had to fix it on, those options were not available outside of the lib file.

[ClaytonJY]

Huh, I wonder what's different between our charts; I'm just using a stacked area chart with the NVD3 library. What's the correct way to implement the fix with javascript directly?

[liquidpele]

This should be fixed in my fork in the development branch, if you're having issues please use that (novus isn't maintaining nvd3 anymore) or just copy the code change into your source (the commit is linked above automatically since I referenced this defect). Cheers.

[chanakyap]

@liquidpele you commit fixed it. Thanks.