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 link：http://jsfiddle.net/sai20/5dzpc3wn/

Answer 1

我建议你有一个数据集，因为你创建的矩形在一个部分上有一个数据集，然后在你创建g group的另一个数据集中......你正在放置一个图像。

我建议数据集中每个数据只有一个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中创建带有图像的堆积条形图

1 个答案: