谁能建议我如何绘制超过 100k 个节点的组织结构图，而不会遇到浏览器崩溃或无响应页面错误的问题。
注意：它是二叉树图表，因此每个父节点只有两个子节点
到目前为止我已经做了什么：
1) 使用 google Charts API 绘制图表：
失败：即使我在每个 ajax 调用上加载 5k 节点，节点限制超过 20k 左右时也会失败
2）画布和svg：
- 使用 d3.js ：当节点大小约为 50-100 时它工作正常，但当加载 20k 或更多时失败。虽然它使用 SVG 构建图表，但主要缺点是管理节点路径
所以请有人帮我弄清楚，所有 js、canvas、svg 对于小数据都可以正常工作，但对于大数据都失败了
这就是大数据应该如何绘制图表。
下面是渲染 100K 个项目但仅渲染可见项目的示例。您的图表应该执行类似的操作，其中您的视图区域比图表更小，并且仅渲染您正在查看的部分。
update添加了 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
