jquery - Best way to draw organization chart using JavaScript over 100k nodes - Stack Overflow

admin管理员组

文章数量:1279113

can anyone suggest me how can i draw organization chart over 100k nodes without facing a issue of browser crash or unresponsive page error.

Note: its a binary tree chart so each parent having only two child node

what i have done till date :

1) draw a chart using google Charts API :

Fails : it fails while node limit exceed around 20k even though i load 5k nodes on each ajax call

2) canvas and svg :

• Using d3.js : its works fine while nodes size is around 50-100 but failed when loads it with 20k and more. And major drawback is to manage path of node though it uses SVG to build chart

So please somebody help me to figure it out, all js, canvas, svg works fine with small data but all are fails against large data

this is how chart should be drawn with large data.

can anyone suggest me how can i draw organization chart over 100k nodes without facing a issue of browser crash or unresponsive page error.

Note: its a binary tree chart so each parent having only two child node

what i have done till date :

1) draw a chart using google Charts API :

Fails : it fails while node limit exceed around 20k even though i load 5k nodes on each ajax call

2) canvas and svg :

• Using d3.js : its works fine while nodes size is around 50-100 but failed when loads it with 20k and more. And major drawback is to manage path of node though it uses SVG to build chart

So please somebody help me to figure it out, all js, canvas, svg works fine with small data but all are fails against large data

this is how chart should be drawn with large data.

• javascript
• jquery
• svg
• charts

Share Improve this question Follow asked Feb 25, 2014 at 7:10 YashPatelYashPatel 29511 gold badge22 silver badges99 bronze badges 4

• 3 Have you considered generating the tree on the fly, depending on what you need to see on screen? Seems like most of the time you should be able to get away with much fewer nodes that way. – Erik Dahlström Commented Feb 25, 2014 at 8:54
• @Erik : i need to show all nodes on screen at a time, so my strategy is that get fewer nodes first and built chart then after i make ajax call to fetch more nodes and rebuild again – YashPatel Commented Feb 25, 2014 at 9:34
• 1 You can't meaningfully show 100k nodes simultaneously in a binary tree. Each level has the same number of nodes as all the previous levels plus 1, so the last row will have 50k nodes in your example above. On a 1600-pixel wide monitor that's 30 nodes per pixel :-) . as Erik suggests use on-the-fly rendering for panning/zooming that only shows nodes if they're a) on-screen and b) going to be bigger than so many pixels. This will increase responsiveness for one thing as less things are getting drawn. (Browser crashes may be due to the dataset size so maybe on-the-fly data fetching is needed too) – mgraham Commented Feb 24, 2016 at 13:58
• lazy load..infinite scroll, i think people forgetting about these concepts :D – xdeepakv Commented Dec 4, 2021 at 17:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Here's an example of rendering 100K items but only the ones that are visible. Your chart should do something similar where you have a smaller view area than the chart and only render the part you're looking at.

update added x, y offset to show the render region.

var can = document.getElementById('can');
var ctx = can.getContext('2d');
var n = 100000;

var t_x = 0;
var t_y = 0;
t_x_incr = 2;
t_y_incr = 2;


var frames = 0
var fps = "- fps";

setInterval(function() {
  fps = frames + " fps";
  frames = 0;
}, 1000);

function render() {
  frames++;
  ctx.save();
  ctx.fillStyle = "#eeeeee";
  ctx.fillRect(0, 0, can.width, can.height);
  ctx.fillStyle = "black";
  ctx.translate(-t_x, -t_y);
  var x = 0;
  var y = 0;

  var w = 100;
  var h = 20;

  var chart_w = w * 3000;
  var chart_h = Math.ceil((n / 3000) * h);

  var min_x = t_x - w;
  var min_y = t_y - h;
  var max_x = t_x + can.width;
  var max_y = t_y + can.height;

  for (var i = 0; i < n; i++) {

    // only draw when visible
    if (x >= min_x && x <= max_x && y >= min_y && y <= max_y) {
      ctx.strokeRect(x, y, w, h);
      ctx.fillText(i, x + 5, y + 13);
    }

    x += w;
    if (x >= chart_w) x = 0, y += h;
  }
  t_x += t_x_incr;
  t_y += t_y_incr;
  if (t_x >= chart_w || t_x <= 0) t_x_incr *= -1;
  if (t_y >= chart_h || t_y <= 0) t_y_incr *= -1;
  ctx.restore();
  ctx.fillStyle = "white";
  ctx.fillRect(7, 2, 80, 20);
  ctx.fillStyle = "red";
  ctx.fillText(fps, 10, 10);
  ctx.fillText("x: " + t_x + ", y: " + t_y, 10,20);
  requestAnimationFrame(render);
}

render();

<canvas id="can" width="300" height="200"></canvas>

I have used Basic Primitives before and it worked fine, I asked this question through support and the answer is as follows:

---

#1

• 1080P resolution gives us 1920 * 1080 pixel = 2 073 600 pixels
• If we display 100K nodes we have 20 pixels per node to draw content and connection lines.
• I hope you understand that zooming out of such a big diagram does not make much sense.

#2

• Loading of 100K nodes, let's say we have the following properties in our node:

  {

  id:100000, // 11 caracters

  title: "Some caption", // up to 40 carcters

  parentid: 99999 // 11 caracters

  }

• it is about 100 000 * 60 / 1024 = 5 859 Kb = 5.7 Mb

• The only fetching 5.7Mb of data from API into the page is not that fast.

• I don't mention that we need to process your data and render it.

• Historically our early version of the control could render 100K nodes, but it was a plane hierarchy having no features.

Suggested solution:

• Look at the following demo: https://www.basicprimitives./dynamicloading

• You can download it from https://github./BasicPrimitives/react-demo

The sources of the demo:

• View: https://github./BasicPrimitives/react-demo/tree/master/client/src/containers/DynamicLoading
• View Model: https://github./BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/dynamicloading.js
• Model: https://github./BasicPrimitives/react-demo/blob/master/server/src/services/demoorganizationalcharts/data/largeorganizationalchart.js

---

• We keep top 2 rows always on the screen, you mat choose different number of levels:
• Then we keep selected nodes always on the screen as well:
• So you can relate nodes from different branches:
• Use API to modify the number of preloaded levels for the cursor:

本文标签： jqueryBest way to draw organization chart using JavaScript over 100k nodesStack Overflow