D3.js SVG中多维数组的可视化

我有一个绑定到g元素的对象数组。对于每个g元素，我生成一个rect元素。到目前为止它还可以工作，但是现在我想在每个g元素中有一个动态数量的“部分”，它应该在现有的rect中生成一个新的rect和text元素

在这里，您可以在fiddle.net/tnnomejg上找到我的示例/

var config = {
    width: 600
};

var data = [
    {
        height: 150,
        y: 0,
        parts: [
            {
                title: "Hello",
                x: 50,
                y: 60,
            },
            {
                title: "World",
                x: 350,
                y: 60,
            }
        ],        
    },
    {
        height: 150,
        y: 155,
        parts: [
            {
                title: "Demo",
                x: 280,
                y: 215,
            }
        ],        
    },
];

var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);

var g = svg.selectAll("g")
                .data(data)
                .enter()
                .append("g");

    g.append("rect")
        .attr("x", 1)
        .attr("y", function(d) { return d.y; })
        .attr("width", config.width)
        .attr("height", function(d) { return d.height; });

---

Thx.

使用d3选择器

每种方法

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});


var配置={
宽度：600
};
风险值数据=[{
身高：150，
y:0，
部分：[{
标题：“你好”，
x:50，
y:60，
}, {
标题：“世界”，
x:350，
y:60，
}],
}, {
身高：150，
y:155，
部分：[{
标题：“演示”，
x:280，
y:215，
}],
}, ];
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，config.width）.attr（“height”，500）；
var g=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
g、 附加（“rect”）
.attr（“x”，1）
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“宽度”，配置宽度）
.attr（“高度”，功能（d）{
返回d.高度；
});
g、 每个（功能（d，i）{
var rect=d3。选择（此）；
d、 部分。forEach（功能（p）{
rect.append（“rect”）
.样式（“填充”、“aliceblue”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.attr（“宽度”，config.width/3）
.attr（“高度”，d.height/2）；
rect.append（“文本”）
.style（“笔划”、“棕色”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.文本（p.标题）；
});
});
使用d3选择器
每种方法

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});


var配置={
宽度：600
};
风险值数据=[{
身高：150，
y:0，
部分：[{
标题：“你好”，
x:50，
y:60，
}, {
标题：“世界”，
x:350，
y:60，
}],
}, {
身高：150，
y:155，
部分：[{
标题：“演示”，
x:280，
y:215，
}],
}, ];
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，config.width）.attr（“height”，500）；
var g=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
g、 附加（“rect”）
.attr（“x”，1）
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“宽度”，配置宽度）
.attr（“高度”，功能（d）{
返回d.高度；
});
g、 每个（功能（d，i）{
var rect=d3。选择（此）；
d、 部分。forEach（功能（p）{
rect.append（“rect”）
.样式（“填充”、“aliceblue”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.attr（“宽度”，config.width/3）
.attr（“高度”，d.height/2）；
rect.append（“文本”）
.style（“笔划”、“棕色”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.文本（p.标题）；
});
});
使用d3选择器
每种方法

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});


var配置={
宽度：600
};
风险值数据=[{
身高：150，
y:0，
部分：[{
标题：“你好”，
x:50，
y:60，
}, {
标题：“世界”，
x:350，
y:60，
}],
}, {
身高：150，
y:155，
部分：[{
标题：“演示”，
x:280，
y:215，
}],
}, ];
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，config.width）.attr（“height”，500）；
var g=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
g、 附加（“rect”）
.attr（“x”，1）
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“宽度”，配置宽度）
.attr（“高度”，功能（d）{
返回d.高度；
});
g、 每个（功能（d，i）{
var rect=d3。选择（此）；
d、 部分。forEach（功能（p）{
rect.append（“rect”）
.样式（“填充”、“aliceblue”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.attr（“宽度”，config.width/3）
.attr（“高度”，d.height/2）；
rect.append（“文本”）
.style（“笔划”、“棕色”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.文本（p.标题）；
});
});
使用d3选择器
每种方法

g.each(function(d, i) {
    var rect = d3.select(this);
    d.parts.forEach(function(p) {
        rect.append("rect")
            .style("fill", "aliceblue")
            .attr("x", p.x)
            .attr("y", p.y)
            .attr("width", config.width / 3)
            .attr("height", d.height / 2);
        rect.append("text")
            .style("stroke", "brown")
            .attr("x", p.x)
            .attr("y", p.y)
            .text(p.title);
    });
});


var配置={
宽度：600
};
风险值数据=[{
身高：150，
y:0，
部分：[{
标题：“你好”，
x:50，
y:60，
}, {
标题：“世界”，
x:350，
y:60，
}],
}, {
身高：150，
y:155，
部分：[{
标题：“演示”，
x:280，
y:215，
}],
}, ];
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，config.width）.attr（“height”，500）；
var g=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
g、 附加（“rect”）
.attr（“x”，1）
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“宽度”，配置宽度）
.attr（“高度”，功能（d）{
返回d.高度；
});
g、 每个（功能（d，i）{
var rect=d3。选择（此）；
d、 部分。forEach（功能（p）{
rect.append（“rect”）
.样式（“填充”、“aliceblue”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.attr（“宽度”，config.width/3）
.attr（“高度”，d.height/2）；
rect.append（“文本”）
.style（“笔划”、“棕色”）
.attr（“x”，p.x）
.attr（“y”，p.y）
.文本（p.标题）；
});
});
您可以使用如下访问器函数将部件数据绑定到相应的元素：

var parts = g.selectAll("g.part")
                .data(function(d) { return d.parts; })
                .enter()
                .append("g")
                    .attr("class", "part");

有了此子选择，您可以插入/附加内容，访问绑定到每个组/部件的相应数据


var配置={
宽度：600
};
风险值数据=[
{
身高：150，
y:0，
部分：[
{
标题：“你好”，
x:50，
y:60
},
{
标题：“世界”，
x:350，
y:60
}
]        
},
{
身高：150，
y:155，
部分：[
{
钛