如何在 d3 中创建带有图像的堆积条形图

Question

我正在尝试创建一个堆叠条形图，每个矩形上都有图像，它在正文中单独创建图像，有人可以帮助我吗？我的代码的输出在另一个 g class 中显示图像，我需要将这些图像显示在各自的矩形中。

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 link : 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/

如何在 d3 中创建带有图像的堆积条形图

how to create a stacked bar chart with images in d3

javascript

d3.js

stacked-chart