使用JavaScript超过100k节点绘制组织结构图的最佳方式 [英] Best way to draw organization chart using JavaScript over 100k nodes

问题描述

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

注意：所以每个父项只有两个子节点

我到目前为止所做的：

1）使用google Charts API：

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

2）canvas和svg：

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

所以请有人帮我弄清楚， js，canvas，svg对小数据工作正常，但都对大数据失败。

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

在与canvas，svg和javascript的长期斗争后，我发现了一种方法来生成组织图使用css和javascript。

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

这是我的演示

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.

解决方案

after a long struggle with canvas, svg AND javascript i found a way to generate a organizational chart using css and javascript.

basic idea is to fetch 5k records on each ajax call and generate a chart on the DOM using ul li combination.

Here's My Demo

这篇关于使用JavaScript超过100k节点绘制组织结构图的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！