我有这样的一组数据:
const data = {
'name': 'analytics',
'children': [
{
'name': 'cluster',
'children': [
{'name': 'AgglomerativeCluster', 'size': 3938},
{'name': 'CommunityStructure', 'size': 3812},
{'name': 'HierarchicalCluster', 'size': 6714},
{
'name': 'MergeEdge', 'size': 743,
'children': [
{'name': 'AspectRatioBanker', 'size': 7074},
],
},
],
},
{
'name': 'graph',
'children': [
{'name': 'BetweennessCentrality', 'size': 3534},
{'name': 'LinkDistance', 'size': 5731},
{'name': 'MaxFlowMinCut', 'size': 7840},
{'name': 'ShortestPaths', 'size': 5914},
{'name': 'SpanningTree', 'size': 3416},
],
},
{
'name': 'optimization',
'children': [
{'name': 'AspectRatioBanker', 'size': 7074},
],
},
],
};
需求是用d3做一个多层的关系图,要求不同层级的元素有不同的样式,这样就需要给每一层的元素加上对应的层级标识使d3渲染的时候能知道当前元素在第几层展示对应的样式。
所以我想实现把上面的那组数据的每一个元素加上一个layer标识,比如下面的样子:
const data = {
'name': 'analytics',
'layer': 0,
'children': [
{
'name': 'cluster',
'layer': 1,
'children': [
{'name': 'AgglomerativeCluster', 'size': 3938, 'layer': 2},
{'name': 'CommunityStructure', 'size': 3812, 'layer': 2},
{'name': 'HierarchicalCluster', 'size': 6714, 'layer': 2},
{
'name': 'MergeEdge', 'size': 743,
'layer': 2,
'children': [
{'name': 'AspectRatioBanker', 'size': 7074, 'layer': 3},
],
},
],
},
。。。。
由于数据都是动态的,所以需要代码遍历实现。
供参考