【发布时间】:2016-03-31 19:44:19
【问题描述】:
我正在尝试使用 d3.js 使用 .json 文件中的数据创建一个冰柱树。我遇到的问题是分区节点的 x 和 dx 属性始终设置为 0。我希望 x 和 dx 值将根据相同深度的节点数进行设置。例如。在下面的示例中,女性和男性的 dx 为 0.5,他们的孩子的 dx 为 0.25 我可能做出了不正确的假设,因为这对我来说是一个新话题。我希望能深入了解为什么这些值始终为 0,或者如何按照我的预期设置这些值。
data.json文件内容为:
{
"name": "Segment",
"children": [
{
"name": "women",
"children": [
{
"name": "cluster",
"children": [
{"name": "recency: >3months", "size": 3938},
{"name": "recency: between 3 and 6months", "size": 3812}
]
},
{
"name": "men",
"children": [
{"name": "recency: >3months", "size": 3534},
{"name": "recency: between 3 and 6months", "size": 5731}
]
}
]
}
]
}
我正在使用以下代码为 d3.layout.partition() 设置数据:
var partition = d3.layout.partition()
// .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var rect = svg.selectAll("rect");
d3.json("data.json", function(error, root) {
if (error) throw error;
rect = rect
.data(partition.nodes(root))
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { return color(d.value); })//d.children ? d : d.parent).key()
.on("click", clicked);
});
function clicked(d) {
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);
【问题讨论】:
标签: javascript json node.js d3.js