Image 如何捕捉D3中加载失败的svg图像？

我正在使用D3创建一个包含

svg元素行的可视化

如果图像文件不可用，有人知道我如何上传替换图像吗

    var images= imageGroup.append('svg:image')
           .attr("xlink:href",function(d,i){
                       //lines of code to process filename
                 return "/img/" + filename + ".jpg"

           })

---

这更像是一个JavaScript问题，

d3.js

：

//设置svg图像标签
var images=d3.选择（“svg”）
.append（'svg:image'）
.attr（'宽度'，50）
.attr（'height'，50）；
//创建一个测试映像
var imgTest=新图像（）；
//如果加载成功，则将其添加到svg图像中
imgTest.onload=函数（）{
attr（“xlink:href”，imgTest.src）；
}
//如果失败，请测试另一个映像
imgTest.onerror=函数（）{
imgTest.src=”https://dummyimage.com/50x50/000/fff.png&text=An+形象！”
}
//这将失败
imgTest.src=”https://does.not/exist.png";

我知道这是一篇老文章，但我找到了一个比Mark answer更简单的解决方案。所以我把它发布给未来有同样问题的用户

在d3.js中，您可以在节点上添加事件侦听器（

单击

，

加载

，

错误

，…）。因此，当映像无法加载时，可以将链接（使用

setAttribute（）

函数）更改为回退映像。下面是一个工作示例（请注意，您不应在

href

之前添加

xlink:

）：

---

@高积云我对代码添加了一个解释。可能有些地方没有解释清楚。如果你不明白，你可以问我，我会改进解释。我已经在我自己的项目中实践过，并且是可行的。

var images= imageGroup.append('svg:image')
  .attr("xlink:href",function(d,i){
    return "/img/" + filename + ".jpg"
  })
  // execute the callback function if the image fails to load
  .on('error', function(d) {
    // specify a default path for the image
    d3.select(this).attr("xlink:href", "/defaultPath");
  });

var images = imageGroup.append('svg:image')
    .attr("href", function(d){
        return "ThisImageWillFailsToLoad.jpg"
    })
    .on("error", function(d){
        this.setAttribute("href", "YourFallbackImage.jpg");
    })