multiple simultaneous chart renders causes slowdown

[davelandry]

Expected Behavior

Re-rendering charts at the same time should not cause such slowdown.

Current Behavior

There is exponential lag when triggering multiple chart re-renders at the same time.

Steps to Reproduce (for bugs)

https://jsfiddle.net/ohpqz7se/23/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

[cnavarreteliz]

[davelandry]

@cnavarreteliz that timer validates that d3plus is the culprit, but does it provide us any additional information?

[davelandry]

@cnavarreteliz if you clone this repository and test locally, the sourcemaps should be able to give more information

[cnavarreteliz]

Nop, only it says that Ne() function is the problem. I suspect that the problem is AxisLeft (I disabled it in d3plus-plot and execution time was better)

[cnavarreteliz]

@davelandry I isolated the problem commenting tickData in d3plus-axis. I'll revise more deeply that part of the code.

[cnavarreteliz]

Root cause: https://github.com/d3plus/d3plus-axis/blob/master/src/Axis.js#L669-L678

[cnavarreteliz]

[davelandry]

iiiiiinteresting, great detective work here @cnavarreteliz.

maybe it's actually an inefficiency with d3plus-shape, and how it renders lines? each tick on an axis is just a Line, using the shape's built in label for the text. It's really just draw the bar shapes (~10 shapes), plus the tick shapes (probably ~20 more shapes). 30 shapes shouldn't be causing that much slowdown...

[cnavarreteliz]

@davelandry I don't have been able to solve yet the problem with slow transitions. But today I discovered that in d3plus-text, same label is re-render three times. Qualitatively I think that the problem is that.

I was trying to isolate this: https://github.com/d3plus/d3plus-text/blob/master/src/TextBox.js#L251-L313

[cnavarreteliz]

[davelandry]

@cnavarreteliz is it actually rendering 3 times? That .each() block draws an individual <text> tag for each line, all inside of a <g> tag. For example, a block of text that has 3 lines would look like this:

<g>
  <text>This is a long</text>
  <text>sentence that is</text>
  <text>on three lines.</text>
</g>

[davelandry]

closed with #103