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

Question

任何人都可以建议我如何在不遇到浏览器崩溃或无响应页面错误的情况下绘制超过100k节点的组织结构图。

注意：它是一个二叉树图表，因此每个父节点只有两个子节点

到目前为止我做了什么：

1）使用Google Charts API绘制图表：

失败：即使我在每个ajax调用上加载了5k个节点，它在节点限制超过大约20k时失败

2）canvas和svg：

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

所以请有人帮我弄明白，所有js，canvas，svg都能正常处理小数据，但都无法对付大数据

这就是如何使用大数据绘制图表。

Answer 1

经过与canvas，svg和javascript的长期斗争后，我找到了一种使用css和javascript生成组织结构图的方法。

基本思路是在每个ajax调用上获取5k记录，并使用ul li组合在DOM上生成图表。

Here's My Demo

Answer 2

以下是渲染100K项目的示例，但仅包含可见的项目。如果您的视图区域比图表小，并且只渲染您正在查看的部分，那么您的图表应该执行类似的操作。

更新 添加了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>