javascript - D3.js 无法将背景图像添加到矩形

Question

我正在使用 d3.js 鱼眼实现矩形列表，并想为每个矩形添加背景图像。我正在尝试以下操作:

 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

您必须设置图案的大小:

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

这是您更新的 fiddle :http://jsfiddle.net/uzbt1cr6/