score:3

Accepted answer

I propose you have a single data set because you are creating rectangle with one dataset on one section, then with the other dataset you making g group... in that group you are putting an image.

I would suggest have a single g per data in the dataset. And in that g append your image and rectangle...life is easy. Something like this

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);
});

Working code here: http://jsfiddle.net/cyril123/0xo38x8q/7/


Related Query

More Query from same tag