javascript - 如何在d3中创建带有图像的堆叠条形图

Question

我正在尝试在每个矩形上创建一个带有图像的堆叠条形图，并且它在正文中分别创建图像，有人可以帮助我吗？我的代码输出显示另一个 g 类中的图像我需要将这些图像显示在相应的矩形中。

d3.select("body").selectAll("rect")
.data(piedata)
.enter()
.append("svg:image")
.attr("xlink:href",function(d) {return d.data.image;})
.attr("width",50)
.attr("height",50)

js链接：http: //jsfiddle.net/sai20/5dzpc3wn/

Answer 1

我建议你有一个单一的数据集，因为你正在创建一个矩形，其中一个数据集在一个部分，然后用另一个数据集你制作 g 组......在那个组中你正在放置一个图像。

我建议在数据集中每个数据有一个 g。在那个 g 中附加你的图像和矩形......生活很容易。像这样的东西

var mygroups = svg.selectAll("g")
    .data(piedata)
    .enter().append("g");
mygroups
    .append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.y1);
})
    .attr("height", function (d) {
    return y(d.y0) - y(d.y1);
})
    .attr("class", "rectangle")
    .style("fill", function (d) {
    return color(d.label);
});
mygroups
    .append("svg:image")
    .attr("xlink:href",function(d) {return d.image})
    .attr("height", function (d) {
    return y(d.y0) - y(d.y1);
}).attr("width", x.rangeBand())
    .attr("y", function (d) {
    return y(d.y1);
});

这里的工作代码：http: //jsfiddle.net/cyril123/0xo38x8q/7/