json - json的自动可视化

Question

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

这是一个两元素 json 数组(使用 libre office 创建)所需输出的示例:



我熟悉 graphviz 语言，并尝试稍微玩弄一下以获得显示的结果，似乎生成点文件并非易事。

您对如何生成此类可视化有任何提示吗？
不必在 graphviz 中，无论是否有效。

非常感谢!

Answer 1

我写了一个简单的脚本来用 node.js 生成这个图:

'use strict';

var _ = require('lodash');
var dataMock = require('./somewhere/myDataMock.json');

var nodeCounter = 1;

function formatEllipsizedText(text, maxLength) {
    if (text.length > maxLength - 1) {
        return text.substring(0, maxLength - 1) + '…';
    } else {
        return text;
    }
}

function json2gvLabel(obj) {
    return _.map(_.keys(obj), function (key) { return '<' + key + '> ' + key; }).join('|');
}

var edges = [];
var nodes = [];

function recurse(parentNode, obj) {
    var myId = nodeCounter++;
    edges.push({from: parentNode, to: myId});
    if (_.isArray(obj)) {
        nodes.push({id: myId, label: 'array'});
        recurse(myId, obj[0]);
    } else if (!_.isObject(obj)) {
        nodes.push({id: myId, label: formatEllipsizedText('' + obj, 50)});
    } else {
        nodes.push({id: myId, label: json2gvLabel(obj)});
        _.each(obj, function (v, k) {
            recurse(myId + ':' + k, v);
        });
    }
}

recurse('root', dataMock);

console.log('digraph g {');
console.log('graph [rankdir = "LR", nodesep=0.1, ranksep=0.3];');
console.log('node [fontsize = "16", shape = "record", height=0.1, color=lightblue2];');
console.log('edge [];');

_.map(nodes, function (n) {
    console.log(n.id + '[label="' + n.label + '"];');
});
_.map(edges, function (e) {
    console.log(e.from + '->' + e.to + ';');
});

console.log('}');

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

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

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

最终结果如下所示: