可视化嵌套的 JSON 结构

Question

考虑这个 JSON 对象：

{ department_1 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_2 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_3 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}
{ department_4 : [{ id : 1, name = Joe Smith, email : [email protected]}, ...., { id : 500, name = Bun Sam, email : [email protected]}]}

显然这是一个嵌套的数据结构，并且有很多记录，在这个例子中最深层我们有大约2000条记录。以响应式和交互式方式可视化这一点的最佳方式是什么？我已经用过这个桌子了，它看起来没有那么互动。我正在寻找想法和方法，也许还有一些示例实现来可视化这一点，同时考虑到可用性。

Answer 1

使用 d3 尝试可折叠树布局。 （从他们的画廊中选择）

他们在页面上有一个详细记录的示例。

Answer 2

这是嵌套表格的一个很好的可视化。它不是交互式的，但您可以通过将文本区域转换为

<textarea>

:

来实现此目的

http://bl.ocks.org/nautat/4085017

Answer 3

这将为您提供一个类似于 Regedit 的树视图

http://jsonviewer.stack.hu/

Answer 4

我创建了一个 json 查看器和编辑器库。你可以在这里尝试一下：https://guifier.com/json
如果您喜欢这个库，请不要忘记在 github 上给它加注星标：https://github.com/maliknajjar/guifier
这是 npm 上的库： https://www.npmjs.com/package/guifier

Answer 5

尝试 Chart.js。您可以在网上找到很多示例和教程。

这是文档链接 http://www.chartjs.org/docs/