D3叠代嵌套数据
问题描述:
我有具有以下结构的JSON数据:D3叠代嵌套数据
var data = {
"from": 1457823600000,
"to": 1458687600000,
"equipments": [
{
"name": "Equipment1",
"actions": [
{
"name": "action1",
"start": 1458035704183,
"end": 1458122104234,
"color": "green"
},
{
"name": "action2",
"start": 1458035704268,
"end": 1458294904268,
"color": "red"
}
]
},
{
"name": "Equipment2",
"actions": [
{
"name": "action3",
"start": 1458208504268,
"end": 1458381304268,
"color": "blue"
},
{
"name": "action4",
"start": 1458122104268,
"end": 1458467704268,
"color": "yellow"
}
]
}
]
}
在D3 y轴应该是这样的:
Equipment 1 |
action1 |
action2 |
|
Equipment 2 |
action3 |
action4 |
|
-----------------------------
现在我的D3看起来像这样
var equipments = svg.selectAll("equipments")
.data(data.equipments)
.enter()
.append("text")
.attr("x", ...)
.attr("y", ...)
.text(name);
我可以在2个设备(Equipment1
和Equipment2
),但如何应对次迭代e设备的孩子?
答
这可能是解决这样我想:
var svg = d3.select('svg');
var equipments = svg.selectAll("equipments")
.data(data.equipments)
.enter()
.append("g");
equipments.append("text")
.text(function(d){return d.name});
equipments.append("g").selectAll("actions")
.data(function(d) { return d.actions })
.enter()
.append("text")
.text(function(d) { return d.name});
输出具有无位置(x或y),因此它的堆叠,但如果检查元件看到所需结构:
<svg>
<g>
<text>Equipment1</text>
<g>
<text>action1</text>
<text>action2</text>
</g>
</g>
<g>
<text>Equipment2</text>
<g>
<text>action3</text>
<text>action4</text>
</g>
</g>
</svg>
我喜欢使用<g>
这在实践中通常非常有用,即使在您的情况下它不是强制性的。 (查看我的jsfiddle)
这是否解决了您的问题?你可以验证这个anwser? – pltrdy