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)

这是您更新的小提琴：http://jsfiddle.net/uzbt1cr6/

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

1 个答案: