Javascript d3 rect在rect中，访问和绘制嵌套元素

我想创建一个包含多个矩形的矩形。因此，对于一行，输出将如下所示（除了类之外没有属性）：

代码：

[
  {"name":"A", "rect":{"x":0, "width":600}, "rectChildren":[{"x":0, "width":200}, {"x":200, "width":200}, {"x":400, "width":200}]},
  {"name":"B", "rect":{"x":0, "width":1200}, "rectChildren":[{"x":0, "width":400}, {"x":400, "width":400}, {"x":800, "width":400}]}
]

var data;
d3.json("flare.json", function(error, flare) {
    if (error) throw error;
    data = flare;
});
var nodes = tree.nodes(data);
var barHeight = 40;

// Update the nodes…
var rects = svg.selectAll("g.rects")
    .data(nodes, function(d) { return d.id || (d.id = ++i); });

//first group
var rectsEnter = rects.enter().append("g")
    .attr("class", "rects");

rectsEnter
    .append("rect")
    .attr("class", "rect")
    .attr("y", function(d, i) { return i * (10 + barHeight); })
    .attr("height", barHeight)
    .attr("width", function(d) { return d.width; })
    .style("fill", "blue");

var rectChildren = rectsEnter
    //here I need something like:
    //foreach(r in d.rectChildren)
    //do
    .append("rect")
    .attr("class", "rectChild")
    .attr("y", function(d, i) { return i * barHeight + 10; })
    .attr("height", barHeight)
    .attr("width", function(d) { return d.width; })
    .style("fill", "green");   

---

首先，您应该调整代码，因为您无法控制数据数组，因为d3.json函数是AJAX调用，因此是异步的。最简单的修复方法是将函数的结束括号移到末尾。要循环遍历子项，可以编写var rectChildren=recenter.selectAll（'rect.rectChildren'）.data（函数（d）{return d.rectChildren；}）.enter（）.append（'rect'）…很抱歉，我的数据函数缺少第一个参数。你能发布你的完整代码吗？是的，这正是我需要知道的。不知道我可以调用数据（函数（d）{return d.rectChildren；}顺便说一句，对于在d3中嵌套元素的每个人来说：好吧，您可以再调用一个参数（数据本身，关键函数是第二个参数）。请参见：首先，您应该调整代码，因为您无法控制数据数组，因为d3.json函数是AJAX调用，因此是异步的。最简单的修复方法是将函数的右括号移到末尾。要循环遍历子函数，您可以编写var rectChildren=recenter.selectAll（'rect.rectChild'）。data（函数（d） {return d.rectChildren；}）.enter（）.append（'rect'）…很抱歉，我的数据函数缺少第一个参数。能否发布完整的代码？是的，这正是我需要知道的。我不知道我可以调用数据（函数（d）{return d.rectChildren；}顺便说一句，对于同样在d3中为嵌套元素而挣扎的每个人来说：好吧，您可以再添加一个参数（数据本身，关键函数是第二个参数）。请参见或此：

var data;
d3.json("flare.json", function(error, flare) {
    if (error) throw error;
    data = flare;
});
var nodes = tree.nodes(data);
var barHeight = 40;

// Update the nodes…
var rects = svg.selectAll("g.rects")
    .data(nodes, function(d) { return d.id || (d.id = ++i); });

//first group
var rectsEnter = rects.enter().append("g")
    .attr("class", "rects");

rectsEnter
    .append("rect")
    .attr("class", "rect")
    .attr("y", function(d, i) { return i * (10 + barHeight); })
    .attr("height", barHeight)
    .attr("width", function(d) { return d.width; })
    .style("fill", "blue");

var rectChildren = rectsEnter
    //here I need something like:
    //foreach(r in d.rectChildren)
    //do
    .append("rect")
    .attr("class", "rectChild")
    .attr("y", function(d, i) { return i * barHeight + 10; })
    .attr("height", barHeight)
    .attr("width", function(d) { return d.width; })
    .style("fill", "green");