Я пытаюсь создать визуальный график точек в удобочитаемом и не запутанном виде, у меня есть идентификаторы, которые представляют узлы, и контакт, который представляет дочерние узлы родительского узла.
У меня есть управление построить их все и правильно соединить, основываясь на отношениях между родителями и детьми, но теперь моя проблема - на самом деле расположить их так, чтобы они выглядели хорошо. sh.
мой код пока таков: (не обращайте внимания на значение cx, cy как то, где я застрял)
var json_data = JSON.parse('[{"id":1,"contact":[{"id":2,"contact":[{"id":5},{"id":6},{"id":7}]},{"id":3,"contact":[{"id":8},{"id":9},{"id":10}]},{"id":4,"contact":[{"id":11},{"id":12},{"id":13}]}]}]');
var g = {
nodes: [],
edges: []
};
var gx = 0, gy = 0;
processLevel(json_data, gx, gy);
function processLevel(data, cx, cy, parent = null) {
console.log("Function Called: data length = " + data.length);
console.log("cy = " + cy);
for(var x = 0; x < data.length; x++){
console.log(data[x].id);
cx = x;
console.log("cx = " + cx);
g.nodes.push({
id: 'n' + data[x].id,
label: 'Node ' + data[x].id,
x: cx*cy,
y: cy,
size: 1,
color: '#FF2D00'
});
if(parent) {
g.edges.push({
id: 'e-' + parent + '-' + data[x].id,
source: 'n' + parent,
target: 'n' + data[x].id,
size: 1,
color: '#000'
});
}
if(typeof data[x].contact !== 'undefined') {
cy++;
processLevel(data[x].contact, cx, cy, data[x].id);
}
}
}
// Instantiate sigma:
s = new sigma({
graph: g,
container: 'graph-container'
});
желаемый результат будет примерно таким:
