使用 d3 数据属性将内部 HTML 设置为 img link

Question

我希望能够在我正在构建的 Web 应用程序中将 img src 传递到内部 html。

这是我的数据中一项的示例：

{"ArtistImage": "https://photos.bandsintown.com/thumb/8697643.jpeg", "Address": "7000 Coliseum Wy, Oakland, CA 94621", "Artist": "Shawn Mendes"}

html 我正在尝试插入图片：

<li>
    <a id="test" href="#">Image</a>
</li>

并且 javascript 根据我悬停在哪个数据点上动态更改内部 html。

d3.selectAll(".events")
      .on("mouseover", function(d) {        
              document.getElementById("test").innerHTML = "<img src=\"d.ArtistImage\" width=\"400px\" height=\"150px\">";
          })

但是它正在读取 404 错误，找不到图像。如何让 javascript 的这一点将 d.ArtistImage 中的 link 作为字符串传递给内部 HTML？提前致谢！

Answer 1

当你这样做时...

"<img src=\"d.ArtistImage\" width=\"400px\" height=\"150px\">"

...您是说该图像的 src 字面意思是 d.ArtistImage，这显然是不正确的。

您可以使用模板文字轻松完成。或者简单地连接字符串：

"<img src='" + d.ArtistImage + "' width='400px' height='150px'>"

最后，您不需要在 D3 代码中使用 document.getElementById。有人可能会争辩说 document.getElementById 比 D3 选择（内部使用 document.querySelector）更快，但差异并不显着，更重要的是，这不是惯用的。只需使用带有 html 的 D3 选择，它在内部使用 innerHTML：

d3.selectAll(".events").on("mouseover", function(d) {        
    d3.select("#test").html("<img src='" + d.ArtistImage + "' width='400px' height='150px'>");
})

使用 d3 数据属性将内部 HTML 设置为 img link

using d3 data properties to set inner HTML to an img link

image

innerhtml

src

d3.js