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＆＃39; dot：

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

最终结果如下：

Answer 2

很好的答案，你的剧本很精彩，乐于助人 我总结取代

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

与

var dataMock = require(process.argv[2]);

和

if (_.isArray(obj)) {
  nodes.push({id: myId, label: 'array'});
  recurse(myId, obj[0]);
}

通过

if (_.isArray(obj)) {
    nodes.push({id: myId, label: 'array'});
    obj.forEach(function(e,i){
        recurse(myId, obj[i]);      
    });
}

了解更多细节。 然后生成点文件，

 node makeGraph.js ./data.json > ./data.dot && xdot ./data.dot  

Answer 3

使用graphviz，您肯定必须使用HTML-like labels。

提示：

• 通过嵌套表
确保对齐和边框
• 使用端口属性（PORT="portname"）
创建源自节点的边缘