我有一组JSON格式数据需要转换为mxGraph图。
这里应该是这样的:
这是我的JSON数据的结构
[
{
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的新手,我没有太多经验,所以任何帮助都会非常感激。谢谢。
答案 0 :(得分:1)
我也是mxGraph的新手,想要一点学习。所以我尝试了你的要求。
我已从fiddle创建example projects of mxGraph-js。
以下是制作魔术的主要代码:
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);
}
Happy Coding,Kalasch