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

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

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

到目前为止我做了什么：

1）使用谷歌图表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上生成图表。

这是我的演示

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();