Javascript mxGraph将JSON数据转换为图形
我有一组JSON格式的数据,需要转换成mxGraph图 下面是它的外观: 这是我的JSON数据的结构Javascript mxGraph将JSON数据转换为图形,javascript,mxgraph,Javascript,Mxgraph,我有一组JSON格式的数据,需要转换成mxGraph图 下面是它的外观: 这是我的JSON数据的结构 [ { name: 'Globals', parentObjects: [] }, { name: 'Customer', included: true, parentObjects: [ { name: 'Globals', } ], }, { name:
[
{
name: 'Globals',
parentObjects: []
},
{
name: 'Customer',
included: true,
parentObjects: [
{
name: 'Globals',
}
],
},
{
name: 'Product',
included: true,
parentObjects: [
{
name: 'Globals',
}
],
},
{
name: 'Transaction',
included: true,
parentObjects: [
{
name: 'Customer',
},
{
name: 'Product',
}
],
},
]
我对mxGraph非常陌生,我没有太多的经验,因此非常感谢您的帮助。谢谢。我也是mxGraph的新手,想参加一个小的学习课程。所以我按你的要求试过了 我已经从中创建了一个 以下是实现这一魔术的主要代码:
var root = undefined;
...
var dict = {};
// run through each element in json
data.forEach(function (element) {
var name = element.name;
// create graph element
var graphElement = graph.insertVertex(parent, null, name, 20, 20, 80, 30);
// check if any parent element
if (element.parentObjects.length > 0) {
// run through each parent element
element.parentObjects.forEach(function (parentObj) {
var parentGraphElement = dict[parentObj.name];
// add line between current element and parent
graph.insertEdge(parent, null, '', parentGraphElement, graphElement);
});
} else {
// set root for layouting
root = graphElement;
}
// add element to dictionary. this is needed to find object later(parent)
dict[name] = graphElement;
});
...
// Creates a layout algorithm to be used with the graph
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);
// Moves stuff wider apart than usual
layout.forceConstant = 140;
if (root) {
layout.execute(parent, root);
}
愉快的编码,Kalasch工作完美!谢谢你,我需要15分钟的时间。一旦我的声誉提高,我一定会把它标记为已被接受。