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

Posted 2023-02-25

【中文标题】D3.js 无法将背景图像添加到矩形

【英文标题】：D3.js Can not add background image to rectangle

【发布时间】：2017-01-26 14:41:13

【问题描述】：

我正在使用 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/

安德烈

【参考方案1】：

你必须设置pattern的大小：

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

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

【讨论】：

哦，它确实有效，谢谢！但是我发现浣熊就像“模糊”一样，不是吗？你知道是否有办法为每个 添加单独的图像，例如： rectEnter .append("image") .attr("x", 0) .attr("y", 0) .attr("width ", 70) .attr("height", h) .attr("xlink:href", "clker.com/cliparts/1/4/5/a/…);

你知道为什么这张图片不可见吗？ jsfiddle.net/nitoloz/fd7svrx6/36

将图像附加到 svg，而不是 rect：jsfiddle.net/dsvbgkL1。关于您的另一个问题，因为这是另一个问题，请发布另一个问题。