javascript - 使用 JavaScript 绘制超过 100k 个节点的组织结构图的最佳方法

Question

谁能建议我如何绘制超过 10 万个节点的组织结构图，而不会遇到浏览器崩溃或页面无响应错误的问题。

注意:它是一个二叉 TreeMap ，所以每个父节点只有两个子节点

到目前为止我做了什么:

1) 使用 google Charts API 绘制图表:

失败:即使我在每个 ajax 调用上加载 5k 个节点，当节点限制超过 20k 时它也会失败

2) Canvas 和 svg :

• 使用 d3.js:它在节点大小约为 50-100 时工作正常，但在加载 20k 或更多时失败。虽然它使用 SVG 构建图表，但主要缺点是管理节点路径

所以请有人帮我弄清楚，所有 js、canvas、svg 都可以在小数据上正常工作，但都无法处理大数据

大数据图表应该这样画。

Answer 1

这是一个渲染 10 万个项目但仅显示可见项目的示例。你的图表应该做类似的事情，你的 View 区域比图表小，并且只呈现你正在查看的部分。

更新添加了 x, y 偏移以显示渲染区域。

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>