带有 html 工具提示标签的 d3 onerror 默认图像答案

【问题标题】：d3 onerror default image with html tooltip tag带有 html 工具提示标签的 d3 onerror 默认图像
【发布时间】：2018-03-08 10:59:50
【问题描述】：

我正在为我的 D3 项目中的鼠标悬停事件制作带有图像和其他数据的工具提示。当我的数据图像丢失时，我想使用默认图像。我无法使用我编写的 html 字符串出现错误，如果有人可以帮我看一下，我将不胜感激。我认为我在格式化这个字符串时遇到了麻烦。

这是相关的代码：

.on("mouseover", function(d) {
  d3.select(this)
    .transition()
    .duration(50)
  div.transition()
      .duration(200)
      .style("opacity", .9);

  div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.onerror=null;this.src="images/00037631.jpg" style ="width:4em;" /> &nbsp;' + d.properties.name)

    //div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.src="images/ANMS0533[020].jpg" style ="width:4em;" /> &nbsp;' + d.properties.name)
    .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY - 28) + "px");
})

我的图像在它存在的地方显示良好，但如果图像丢失，我会得到一个无图像图标，我希望看到默认图像，或者什么都没有。

希望有人能帮忙。

【问题讨论】：

这可能是由onError 期待一个函数引起的。
感谢您的回复。所以我不能像这样在 html 中使用 on error 吗？我不确定如何在这里使用函数。您能否提供示例代码的帮助或将我指向可以提供帮助的资源？再次感谢您不厌其烦地回复。

标签： javascript html image d3.js onerror

【解决方案1】：

我可能会这样解决这个问题，要么在上传的 img 标签上使用 id 或 class，然后使用 d3 选择它并在错误事件上附加。

.on("mouseover", function(d) {
  d3.select(this)
    .transition()
    .duration(50)
  div.transition()
      .duration(200)
      .style("opacity", .9);

  div.html('<img id="loadingPic" src="images/'+ d.properties.objectNumber +'.jpg"/> &nbsp;' + d.properties.name)

d3.select("#loadingPic").on("error", function(){
  let el = d3.select(this);
  el.attr("src", "images/00037631.jpg").style("width", "4em");
  el.on("error", null);
})
    //div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.src="images/ANMS0533[020].jpg" style ="width:4em;" /> &nbsp;' + d.properties.name)
    .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY - 28) + "px");
})

【讨论】：

非常感谢您的帮助。该解决方案非常适合我。我编写函数的尝试没有让我得到任何帮助，所以我非常感谢您的帮助。