记一次复杂的拓扑图数据转换
接了一个拓扑图的需求，而后端返回的数据结构已经定死了，即下面的oldList。
oldList 中的每一项中，以下划线_为分割线，第二个依赖于第一个，第三个依赖于第二个，以此类推。
let oldList = [ [ "rootItem_test_a_test_b" ], [ "rootItem_test-c_test-d_test-e_test-f" ], [ "rootItem_test-g_test-h_test-i_test-j" ], [ "rootItem_test-k_test-h_test-l" ] ]
而当时的拓扑图组件，要求的数据格式是下面的resData这种：
let resData = { nodes: [ { id: '1', name: 'rootItem' }, { id: '2', name: 'test_a' }, { id: '3', name: 'test_b' }, { id: '4', name: 'test-c', }, { id: '5', name: 'test-d' }, { id: '6', name: 'test-e' }, { id: '7', name: 'test-f' }, { id: '8', name: 'test-g' }, { id: '9', name: 'test-h' }, { id: '10', name: 'test-i' }, { id: '11', name: 'test-j' }, { id: '12', name: 'test-k' }, { id: '13', name: 'test-l' }, ], calls: [ { id: '1_2', source: '1', target: '2', value: 0 }, { id: '2_3', source: '2', target: '3', value: 0 }, { id: '1_4', source: '1', target: '4', value: 1 }, { id: '4_5', source: '4', target: '5', value: 1 }, { id: '5_6', source: '5', target: '6', value: 1 }, { id: '6_7', source: '6', target: '7', value: 1 }, { id: '1_8', source: '1', target: '8', value: 2 }, { id: '8_9', source: '8', target: '9', value: 2 }, { id: '9_10', source: '9', target: '10', value: 2 }, { id: '10_11', source: '10', target: '11', value: 2 }, { id: '1_12', source: '1', target: '12', value: 3 }, { id: '12_9', source: '12', target: '9', value: 3 }, { id: '9_13', source: '9', target: '13', value: 3 }, ], };
nodes：包含所有的类目，包含id，展示用的名称
calls：展示拓扑图的线条，以value为标识，同一个value的，在同一条线。
- id：能展示依赖关系的一个id，1_2,表示为2依赖1
-
source：上一个点的id
-
target：下一个点的id
-
value：表示自己在哪一条线上
已知根目录为rootItem，即几条线的源头都在这一类目
需要把oldList 数组转化成resData 这种结构，才能进行后续的任务。
以下为实现逻辑
let newList = [],
nodes = []
new Promise(resolve => {
//处理原始数据，每一项以_为分割点，切割成数组
oldList.map((item, i) => {
let tempList = item[0].split("_");//每一项以_为分割点，切割成数组
tempList.map((tempItem, j) => {
//处理数据，设置value为i的原因是，相同的value代表在同一条线上
let obj = {
name: tempItem,
id: j + 1,
value: i
}
newList.push(obj);//因为有四条线，此时就得到了有四个根目录的数组
})
})
//把多余的根目录去重
nodes = uniqueArray(JSON.parse(JSON.stringify(newList)), "name");
//给node数组添加id,得到需要的node数组
nodes.map((item, i) => {
item.id = i + 1
})
//到此为止，实际上我们已经得到了nodes
resolve()
}).then(res => {
let tempList = [];
new Promise(resolve => {
newList.map(item => {
tempList.push(item)
})
resolve()
}).then((res) => {
//这里是为了得到calls
nodes.map(item => {
tempList.map((item2, index) => {
if (item.name === item2.name) {
item2.id = item.id;//这一步是为了得到正确的id，原有的id是错乱的
}
})
})
let callsList = [];
tempList.map((item, index) => {
if (index !== tempList.length - 1) {
if (tempList[index + 1].id !== 1) {
let obj = {
source: item.id,
target: tempList[index + 1].id,
value: item.value,
id: item.id + "_" + tempList[index + 1].id
}
callsList.push(obj);
}
}
})
})
})
//数组根据name去重
function uniqueArray(array, key) {
var result = [array[0]];
for (var i = 1; i < array.length; i++) {
var item = array[i];
var repeat = false;
for (var j = 0; j < result.length; j++) {
if (item[key] == result[j][key]) {
repeat = true;
break;
}
}
if (!repeat) {
result.push(item);
}
}
return result;
}
