如果我将以下JSON提供给d3,它就可以了。
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A",
"parent": "Top Level",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A"
},
{
"name": "Daughter of A",
"parent": "Level 2: A"
}
]
},
{
"name": "Level 2: B",
"parent": "Top Level"
}
]
}
但如果我改为跟随它就行不通。请注意, c hildren中的CAPITAL C , p 中的 P 不是 name < / strong>我有 DeptCode 所以问题是有没有办法指示d3与json一起使用 C hildren而不是 c hildren, P 不是< strong> p 不是和 DeptCode 而不是名称?
{
"DeptCode": "Top Level",
"Parent": "null",
"Children": [
{
"DeptCode": "Level 2: A",
"Parent": "Top Level",
"Children": [
{
"DeptCode": "Son of A",
"Parent": "Level 2: A"
},
{
"DeptCode": "Daughter of A",
"Parent": "Level 2: A"
}
]
},
{
"DeptCode": "Level 2: B",
"Parent": "Top Level"
}
]
}
编辑:我刚发现this。但我无法破译该怎么做。有人可以详细说明吗?
答案 0 :(得分:3)
对于给定的数据集
var treeData = [
{
"DeptCode": "Top Level",
"Parent": "null",
"Children": [
{
"DeptCode": "Level 2: A",
"Parent": "Top Level",
"Children": [
{
"DeptCode": "Son of A",
"Parent": "Level 2: A"
},
{
"DeptCode": "Daughter of A",
"Parent": "Level 2: A"
}
]
},
{
"DeptCode": "Level 2: B",
"Parent": "Top Level"
}
]
}
];
这是你如何连线的:
由于数据包含儿童而非默认儿童。
var tree = d3.layout.tree()
.size([height, width])
.children(function(d){return d.Children;});//this will provide children.
对于节点上的文本,请执行以下操作:
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.DeptCode; })//the new label name
.style("fill-opacity", 1e-6);
对于可折叠节点,请执行以下操作:
// Toggle children on click.
function click(d) {
if (d.Children) {
d._children = d.Children;//since the children is stored in Children.
d.Children = null;
} else {
d.Children = d._children;
d._children = null;
}
update(d);
}
工作代码here
希望这有帮助!
答案 1 :(得分:1)
这实际上比接受的答案简单得多。您需要做的就是让d3以正确的方式格式化您的数据(使用children
代替Children
和parent
而不是Parent
。在d3 v3中,这是完成的d3.layout.hierarchy()`就像这样:
var myJSON = {
"DeptCode": "Top Level",
"Parent": "null",
"Children": [
{
"DeptCode": "Level 2: A",
"Parent": "Top Level",
"Children": [
{
"DeptCode": "Son of A",
"Parent": "Level 2: A"
},
{
"DeptCode": "Daughter of A",
"Parent": "Level 2: A"
}
]
},
{
"DeptCode": "Level 2: B",
"Parent": "Top Level"
}
]
}
var hierarchy = d3.layout.hierarchy()
.children(function(d) {
return d.Children;
});
hierarchy(myJSON);
// use myJSON like you normally would
这会将children
和parent
个键添加到正确的对象中,现在d3将能够使用您的json而无需进行上述建议的额外更改。
编辑: 工作代码here