D3.js Невозможно добавить фоновое изображение в прямоугольник

Question

Я реализую список прямоугольников с d3.js fisheye и хочу добавить фоновое изображение к каждому из прямоугольников. Пытаюсь следующую вещь:

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

Но до сих пор не может сделать изображение появится на прямоугольники. У кого-нибудь есть идеи, почему это происходит и как добавить изображение? Вот the fiddle с моей реализацией.

Для упрощения дела я создал еще один jsfiddle с изображением прикрепленного к Rect, но не работает: https://jsfiddle.net/nitoloz/fd7svrx6/36/

Андрей

Answer 1

Вы должны установить размер pattern:

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

Ваша обновленная скрипка: http://jsfiddle.net/uzbt1cr6/