Question

transition.select("image")
    .attr("xlink:href", function(d) {
      //fix icon error if icon does not exist in folder
      return 'assets/64pxBlue/file.png';
      // return d.icon
    })
    .attr("x", function(d) {return d.position_x ? d.position_x : '0px'})
    .attr("y", function(d) {return d.position_y ? d.position_y : '-10px'})
    .attr("width", function(d) {return d.value ? d.value : '20px'})
    .attr("height", function(d) {return d.value ? d.value : '20px'})
}

我正在尝试以PNG格式可视化文件。解析字符串后;它将匹配字符串与相应的png和渲染。但是，我没有所有可能的png，所以如果我的assets / 64pxBlue /目录中不存在，我需要返回默认的png。

在我的devtools中，有一个GET错误。如何捕获该错误，如果出现错误则返回file.png？

Answer 1

D3没有任何东西可以支持这个，但你可以用简单的js来完成，如下所示：

＆＃13;

d3.selectAll("img")[0].forEach(function(i, n){
  i.onload=imageFound;//on error call this function
  i.onerror=imageNotFound;//on success call this function
  if (n ==0)
 	i.src="http://www.w3schools.com/html/pic_mountain.jpg";
  else
    i.src="http://www.w3schools.com/html/blah-blah.jpg";//set a wrong url
})


function imageFound() {
    console.log('That image is found and loaded');
}

function imageNotFound(me) {
    //set default url in case image not found
    me.target.src="http://www.w3schools.com/tags/smiley.gif";
    console.log("defaut image")
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<img  alt="Mountain View" style="width:304px;height:228px;">

<img alt="Mountain View" style="width:304px;height:228px;">

＆＃13;

如何捕获D3中的xlink：href错误？

1 个答案: