jsoncrack是一个开源的 JSON 数据可视化工具，由开发者 Aykut Sarac 主导开发，旨在帮助用户将复杂的 JSON 数据转换为直观的交互式图形，便于更轻松地理解、分析和调试 JSON 结构。
将 JSON 文本或文件转换为交互式的树形图、力导向图（Force Graph）或思维导图，清晰展示数据的层级关系和关联。
项目地址：https://github.com/AykutSarac/jsoncrack.com
一、技术原理
1.JSON/JSON5 解析：将文本转换为可操作数据
用户输入的 JSON 数据（文本或文件）首先需要被解析为程序可处理的数据结构（如 JavaScript 对象），这是可视化的基础。
核心技术：
对于标准 JSON，直接使用 JavaScript 原生 `JSON.parse()` 解析；
对于支持注释、尾逗号等扩展语法的 JSON5（工具兼容的格式），则通过 `json5` 等开源库解析（处理非标准语法）。
处理逻辑：
解析过程中会校验数据格式合法性，若存在语法错误（如缺少括号、类型不匹配），会实时返回错误提示（如“Unexpected token in JSON at position X”），帮助用户调试。
2.数据结构化：构建可视化节点树
解析后的 JSON 对象是嵌套的层级结构（如对象、数组、基本类型值），需要转换为适合图形渲染的 “节点树” 数据结构。
节点模型设计：
递归遍历 JSON 结构，为每个键值对创建一个“节点”，包含以下核心属性：
```javascript
{
id: \"唯一标识（如路径哈希）\",
type: \"节点类型（object/array/string/number/boolean/null）\",
key: \"键名（如 JSON 中的属性名）\",
value: \"值（如字符串内容、数字等）\",
parent: \"父节点引用（用于维护层级关系）\",
children: \"子节点列表（对象/数组的嵌套元素）\",
depth: \"层级深度（用于布局计算）\"
}
```
特殊处理：
数组节点会额外记录索引（如 `[1,2,3]` 中的元素节点会标记 `index: 0,1,2`）；
大体积 JSON（如 10 万+节点）会通过“节点裁剪”或“懒加载”优化，避免一次性处理过多数据导致卡顿。
3.图形布局：力导向算法实现自然排布
`jsoncrack` 最具特色的是 力导向图（Force-Directed Graph） 布局，让节点以类似物理系统的方式自然分布（避免重叠、保持合理间距），这是其可视化效果的核心。
力导向算法原理：
基于“物理模拟”思想，为节点和连线定义虚拟力：
斥力：所有节点之间存在斥力（类似同名电荷），避免过度拥挤；
引力：父子节点之间存在引力（类似弹簧），保持层级关联；
约束力：限制节点超出画布范围，确保整体布局在可视区域内。
实现库：
底层依赖 D3.js（数据驱动文档库）的 `d3-force` 模块，该模块提供了成熟的力导向布局计算引擎，通过迭代模拟力的作用，最终达到平衡状态（节点位置稳定）。
4.图形渲染：SVG/Canvas 绘制交互式图形
布局计算完成后，需要将节点树和力导向布局结果渲染为可视化图形，同时支持交互操作（缩放、点击、折叠等）。
渲染载体：
主要使用 SVG（可缩放矢量图形），原因是：
矢量格式支持无损缩放，适配不同屏幕尺寸；
每个节点/连线都是独立的 SVG 元素（如 `` 分组、`` 节点、`` 连线），便于绑定事件（点击、hover 等）。
对于超大数据量（如 10 万+节点），可能会降级使用 Canvas 渲染（性能更高，但交互精度较低）。
视觉设计：
节点样式：根据类型区分（如对象节点用蓝色、数组用绿色、字符串用灰色）；
连线：父子节点用线条连接，线条粗细/颜色反映层级关系；
标签：节点显示键名和值（长值会自动截断，hover 时显示完整内容）。
5.交互功能：事件监听与状态管理
工具支持的缩放、平移、节点展开/折叠等交互，依赖前端事件系统和状态管理：
缩放与平移：
通过监听鼠标滚轮（缩放）和拖拽事件（平移），修改 SVG 容器的 `transform` 属性（如 `scale(1.5) translate(100, 200)`），实现视图控制。
节点展开/折叠：
点击节点时，切换其 `isExpanded` 状态：
折叠时，隐藏子节点和连线，仅保留当前节点；
展开时，重新计算子节点的布局并渲染（通过更新 D3 力导向布局的节点数据）。
实时更新：
用户修改 JSON 文本时，通过防抖（debounce）优化（如输入停止 300ms 后触发更新），重新执行“解析→结构化→布局→渲染”全流程，实现“输入即预览”。
6.离线与跨端：PWA 与 Electron 技术
网页版离线使用：
基于 PWA（渐进式 Web 应用） 技术，通过 `Service Worker` 缓存核心资源（HTML/CSS/JS、图标等），支持无网络环境下打开工具并处理本地 JSON 数据。
桌面客户端：
桌面版（Windows/macOS/Linux）基于 Electron 开发，本质是将网页版封装为原生应用，通过 Electron 的 `node.js` 能力访问本地文件系统（实现 JSON 文件导入/导出），同时保留网页版的全部功能。
二、使用
（一）获取工具（两种方式）
1.网页版（推荐快速使用）
直接访问官方网站，无需安装，打开即可用。
2.桌面客户端（适合离线/本地文件处理）
支持 Windows、macOS、Linux，下载地址：
GitHub Releases 页面：[jsoncrack.com/releases](https://github.com/AykutSarac/jsoncrack.com/releases)
安装后打开，界面与网页版一致，支持本地文件导入导出。
（二）基本使用步骤（以网页版为例）
1.输入 JSON 数据
工具提供多种数据输入方式，选择适合你的一种：
粘贴 JSON 文本：在左侧编辑区直接粘贴 JSON 或 JSON5 格式的文本（支持注释、尾逗号等扩展语法）。
上传 JSON 文件：点击顶部工具栏的「Upload」按钮，选择本地 `.json` 或 `.json5` 文件。
使用示例数据：点击左侧编辑区上方的「Examples」，选择预设的示例 JSON（如嵌套对象、数组等），快速体验功能。
*提示*：若输入格式错误，编辑区会实时标红错误位置，并显示提示（如“Missing closing brace”），方便修正。
2.生成可视化图形
输入数据后，工具会 自动实时渲染 可视化结果（右侧区域），默认展示为力导向图（Force Graph），节点和连线清晰展示 JSON 的层级关系：
节点颜色：不同类型的节点用不同颜色区分（如对象节点为蓝色，数组为绿色，字符串值为灰色）。
节点内容：显示键名（如 `name`）和值（如 `Alice`），长值会自动截断（hover 时显示完整内容）。
3.交互操作：浏览与分析数据
可视化图形支持多种交互，方便深入查看复杂结构：
缩放与平移：
鼠标滚轮：缩放视图（放大查看细节，缩小看整体）。
按住鼠标左键拖拽：平移视图，调整可视区域。
点击右上角「Reset View」：恢复默认视图比例和位置。
节点展开/折叠：
点击节点：折叠或展开子节点（适合隐藏深层嵌套的冗余信息）。
折叠后节点会显示 `+N`（N 为子节点数量），点击可重新展开。
节点详情：
点击节点后，右侧会显示「Node Info」面板，展示该节点的完整路径（如 `user.address.city`）、类型、值等详细信息。
搜索节点：
顶部搜索框输入关键词（键名或值），工具会高亮匹配的节点，并支持快速跳转。
4.导出与分享
分析完成后，可将结果导出或分享：
导出为图片：点击顶部「Export」→「PNG」，将当前可视化图形保存为图片（支持调整尺寸和背景色）。
复制分享链接：点击顶部「Share」，生成一个临时链接，可分享给他人查看当前可视化结果（链接有效期较短，适合临时协作）。
保存为文件（桌面版）：点击「Save」，将 JSON 数据和可视化配置保存为本地文件，下次可直接打开。
（三）高级功能
1.切换视图模式：
点击顶部「Layout」，可切换可视化风格：
Force Graph（默认）：力导向图，节点自然分布，适合展示复杂关联。
Mind Map：思维导图模式，从中心向外辐射，适合层级清晰的 JSON。
Tree：严格树形结构，层级分明，适合简单嵌套数据。
2.处理大型 JSON：
对于超过 10 万节点的大型 JSON，工具会自动启用「懒加载」（仅渲染可视区域节点），避免卡顿。可通过「Settings」→「Performance」调整渲染策略。
3.自定义样式：
点击顶部「Settings」，可修改节点大小、连线粗细、背景色（浅色/深色模式）等，适配个人偏好或演示场景。
（四）注意事项
JSON5 支持：可直接输入带注释（`// 这是注释`）或尾逗号的 JSON5 格式，工具会自动兼容解析。
隐私保护：网页版处理的数据仅在浏览器本地运行，不会上传到服务器（敏感数据可放心使用）。
性能限制：极大型 JSON（如 100 万+节点）可能导致渲染缓慢，建议先简化数据（删除无关字段）再可视化。
总结
jsoncrack的技术原理是 “数据解析→结构转换→物理模拟布局→矢量渲染→交互响应” 的流水线式流程，核心依赖 JSON 解析库、D3.js 力导向算法、SVG 渲染和前端事件系统，同时通过 PWA 和 Electron 实现跨端与离线能力，最终实现“复杂 JSON 数据的直观可视化”目标。
