Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

multiple simultaneous chart renders causes slowdown #140

Open
mwolfeu opened this issue Jul 31, 2019 · 0 comments
Open

multiple simultaneous chart renders causes slowdown #140

mwolfeu opened this issue Jul 31, 2019 · 0 comments
Labels
enhancement

Comments

@mwolfeu
Copy link

mwolfeu commented Jul 31, 2019

Perhaps related to bug #102.

Expected Behavior

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

Current Behavior

In the provided code, the 20 charts render in < 20sec.
Setting the timeout to 0 makes time jump to > 3min!
Upping the number of charts makes the render time exponentially longer with a 0 timeout.

Steps to Reproduce (for bugs)

Run code below with v0.8.18
change setTimeout to 0

Your Environment

CPU: Q8400
Chromium Version 75.0.3770.90 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
Saw the same on Win10

---code---

<html><head>

  <meta charset="utf-8">
  <script src="d3plus-plot.full.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
  <style>

    body {
      margin: 0;
      overflow: hidden;
    }
    
    .graph {
      width: 20vw;
      height: 15vh;
      display: inline-block;
    }
    
  </style>

<body>
<div id="test"></div>


<script>

  var data = [
    {id: "alpha", x: 4, y:  7},
    {id: "alpha", x: 5, y: 25},
    {id: "alpha", x: 6, y: 13},
  ];
  
  var N = 20;
  var testArr = Array.apply(null, {length: N}).map(Number.call, Number);
  
  function plot(d) {
    
    new d3plus.AreaPlot().select(`#a${d}`)
    .data(data)
    .shapeConfig({
      fill: '#00ff00',
      strokeWidth: 1
      })
    .groupBy("id")
    .render();
  }
  
  testArr.forEach(d => {
    $("#test").append(`<div id='a${d}' class="graph"> </div>`);
    setTimeout(plot, d*200, d);
    });

  
</script>



</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davelandry @mwolfeu