我正在寻找一种自动化的方法来生成我正在构建的特定类型的 json 的可视化。
我正在构建的 json 是一个元素数组,每个元素都可以包含简单的字段(比如字符串和数字)或对数组中另一个此类对象的引用。
这是一个两元素 json 数组(使用 libre office 创建)所需输出的示例:
我熟悉 graphviz 语言,并尝试稍微玩弄一下以获得显示的结果,似乎生成点文件并非易事。
您对如何生成此类可视化有任何提示吗?
不必在 graphviz 中,无论是否有效。
非常感谢!
最佳答案
我写了一个简单的脚本来用 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
最终结果如下所示:
关于json - json的自动可视化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22727974/