D3.js Kann kein Hintergrundbild zum Rechteck hinzufügen

Question

Ich implementiere eine Liste von Rechtecken mit d3.js fisheye und möchte jedem Rechteck ein Hintergrundbild hinzufügen. Ich versuche folgende Sache:

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

aber immer noch nicht das Bild auf die Rechtecke erscheinen. Hat jemand Ideen, warum das passiert und wie man das Bild hinzufügen? Hier ist the fiddle mit meiner Implementierung.

den Fall zu vereinfachen ich ein anderes jsfiddle mit Bild erstellt haben an rect, aber nicht funktioniert: https://jsfiddle.net/nitoloz/fd7svrx6/36/

Andrey

Answer 1

Sie haben die Größe des pattern einzustellen:

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

Hier ist Ihre aktualisierte Geige: http://jsfiddle.net/uzbt1cr6/