如何在VEGA Api中使用D3树数据?

Question

我正在尝试使用Vega API渲染D3树数据。

Vega Tree文档说明Vega使用d3树层次结构。这表明这应该是可能的。Vega页面甚至包括D3层次结构的链接，看起来像这样:

{
"name": "Eve",
"children": [
{
"name": "Cain"
},
{
"name": "Seth",
"children": [
{
"name": "Enos"
},
{
"name": "Noam"
}
]
},
{
"name": "Abel"
},
{
"name": "Awan",
"children": [
{
"name": "Enoch"
}
]
},
{
"name": "Azura"
}
]
}

但是在织女星树图中直接使用它是行不通的。

Vega自己的树示例包含一个可以工作的数据文件，但数据格式看起来完全不同。是否有一种方法将D3数据层次结构转换为Vega支持的格式?Vega文档讨论了转换，但我找不到一个例子。

所需的织女星格式如下所示。它使用ID来知道父节点是谁，而不是嵌套的数组。

[
{
"id": 1,
"name": "flare"
},
{
"id": 2,
"name": "analytics",
"parent": 1
},
{
"id": 3,
"name": "cluster",
"parent": 2
},
{
"id": 4,
"name": "AgglomerativeCluster",
"parent": 3,
"size": 3938
},
{
"id": 5,
"name": "CommunityStructure",
"parent": 3,
"size": 3812
}

如何在Vega中使用D3格式的树数据?

Answer 1

我没有在Vega中尝试过，但是您可以使用下面的小辅助函数转换层次结构:

data = {
"name": "Eve",
"children": [
{
"name": "Cain"
},
{
"name": "Seth",
"children": [
{
"name": "Enos"
},
{
"name": "Noam"
}
]
},
{
"name": "Abel"
},
{
"name": "Awan",
"children": [
{
"name": "Enoch"
}
]
},
{
"name": "Azura"
}
]
};
console.log(flatten(data));
function flatten(hierarchy) {
let ar = [];
let i = 0;

let hierarchyWithID = d3.hierarchy(hierarchy).each(d => d.id = i++);

ar = hierarchyWithID.descendants().map(d => {
let obj = {};
obj.name = d.data.name;
obj.id = d.id;
if (d.parent) { obj.parent = d.parent.id;}
if (d.size) { obj.size = d.size;}
return obj;
});

return ar;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

或者，一个没有d3.js函数的版本(分配不同的id):

data = {
"name": "Eve",
"children": [
{
"name": "Cain"
},
{
"name": "Seth",
"children": [
{
"name": "Enos"
},
{
"name": "Noam"
}
]
},
{
"name": "Abel"
},
{
"name": "Awan",
"children": [
{
"name": "Enoch"
}
]
},
{
"name": "Azura"
}
]
};
console.log(flatten2(data));
function flatten2(obj) {
let id = 0;
return _flatten2(obj);
function _flatten2(obj, ar = [], parentID = -1) {
let node = {};
node.id = id++;
node.name = obj.name;
if (parentID !== -1) { node.parent = parentID;}
if (obj.size) { node.size = obj.size;}
ar.push(node);
if (obj.children) {
for (let child of obj.children) {
_flatten2(child, ar, node.id);
}
}
return ar;
}
}