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

您必须设置 pattern 的大小：

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

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

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

D3.js Can not add background image to rectangle

javascript

css

image

fisheye

d3.js