json自动可视化

Question

我正在寻找一种自动化的方法来生成我正在构建的特定类型 json 的可视化。我正在构造的 json 是一个元素数组，每个元素可以包含简单字段（例如字符串和数字）或对数组中另一个此类对象的引用。

这是一个两元素 json 数组（使用 libre office 创建）所需输出的示例：

我熟悉 graphviz 语言，并尝试稍微尝试一下以获得 iv'e 显示的结果，似乎生成点文件并不简单。

您对如何制作此类可视化有什么建议吗？不必在 graphviz 中，只要有效即可。

非常感谢！

Answer 1

我编写了一个简单的脚本来使用 node.js 生成此图：

\n\n

\'use strict\';\n\nvar _ = require(\'lodash\');\nvar dataMock = require(\'./somewhere/myDataMock.json\');\n\nvar nodeCounter = 1;\n\nfunction formatEllipsizedText(text, maxLength) {\n    if (text.length > maxLength - 1) {\n        return text.substring(0, maxLength - 1) + \'\xe2\x80\xa6\';\n    } else {\n        return text;\n    }\n}\n\nfunction json2gvLabel(obj) {\n    return _.map(_.keys(obj), function (key) { return \'<\' + key + \'> \' + key; }).join(\'|\');\n}\n\nvar edges = [];\nvar nodes = [];\n\nfunction recurse(parentNode, obj) {\n    var myId = nodeCounter++;\n    edges.push({from: parentNode, to: myId});\n    if (_.isArray(obj)) {\n        nodes.push({id: myId, label: \'array\'});\n        recurse(myId, obj[0]);\n    } else if (!_.isObject(obj)) {\n        nodes.push({id: myId, label: formatEllipsizedText(\'\' + obj, 50)});\n    } else {\n        nodes.push({id: myId, label: json2gvLabel(obj)});\n        _.each(obj, function (v, k) {\n            recurse(myId + \':\' + k, v);\n        });\n    }\n}\n\nrecurse(\'root\', dataMock);\n\nconsole.log(\'digraph g {\');\nconsole.log(\'graph [rankdir = "LR", nodesep=0.1, ranksep=0.3];\');\nconsole.log(\'node [fontsize = "16", shape = "record", height=0.1, color=lightblue2];\');\nconsole.log(\'edge [];\');\n\n_.map(nodes, function (n) {\n    console.log(n.id + \'[label="\' + n.label + \'"];\');\n});\n_.map(edges, function (e) {\n    console.log(e.from + \'->\' + e.to + \';\');\n});\n\nconsole.log(\'}\');\n

\n\n

请注意，在我的脚本中，我将数组折叠为仅一项以可视化结构，而不是显示所有数据。

\n\n

然后，为了生成 PDF，我将此脚本的输出（gv 格式）通过管道传输到 graphviz dot：

\n\n

node makeGraph.js | dot -Tpdf > ~/Desktop/a.pdf\n

\n\n

最终结果如下所示：

\n\n

\n