2

I'm implementing list of rectangles with d3.js fisheye and want to add a background image to each of rectangles. I'm trying following thing:

 svg.append("defs")
   .append("pattern")
   .attr("id", "bg")
   .append("image")
            .attr("width", 50)
            .attr("height", h)
   .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg");

//Create bars
var rectEnter = svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return xScale(i);
   })
   .attr("y", function(d) {
        return 0;
   })
   .attr("width", function(d,i){return xScale.rangeBand(i)})
   .attr("height", function(d) {
        return h;
   })
   .attr("fill", function(d) {
        return "url(#bg)";
   })
   .attr("stroke",function(d){return 'black';});

But still can not make the image appear on the rectangles. Does anyone has ideas why this happens and how to add the image to ? Here is the fiddle with my implementation.

To simplify the case I've created another jsfiddle with image attached to rect, but not working: https://jsfiddle.net/nitoloz/fd7svrx6/36/

Andrey

nitoloz
  • 165
  • 1
  • 16

1 Answers1

3

You have to set the size of the pattern:

.attr("width", 50)
.attr("height", h)

Here is your updated fiddle: http://jsfiddle.net/uzbt1cr6/

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • Oh, it really works, thanks! However I found that the racoons are like "blurred", aren't they? Do you know if there is a way to add separate images for each like: rectEnter .append("image") .attr("x", 0) .attr("y", 0) .attr("width", 70) .attr("height", h) .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg"); – nitoloz Jan 26 '17 at 15:28
  • Do you have any ideas why this image might be not visible? https://jsfiddle.net/nitoloz/fd7svrx6/36/ – nitoloz Jan 26 '17 at 20:42
  • 1
    Append the image to the svg, not to the rect: https://jsfiddle.net/dsvbgkL1/ . Regarding your other question, as this is *another* problem, please post another question. – Gerardo Furtado Jan 26 '17 at 23:36