如何创建<img>使用CSV数据文件中的名称在工具提示中标记

How to create an <img> tag in tooltip using names from the csv data file

本文关键字：文件 工具提示 数据 使用 创建 何创建 img CSV      更新时间：2023-09-26

我有一个文件归档随时间变化的散点图。
我有一个工具提示框，在鼠标移到数据点上时弹出，它提供文本数据。我想在每个工具提示框中包含一个图像。
数据取自.csv文件，该文件包含DocName、FilingDate、DocNumber等多个字段。
每个图像都保存在"images"文件夹中，作为DocNumber.jpg。
我试图拼凑一段代码，将从csv文件中拾取DocNumber，并创建正确的html标签，使图像显示....
到目前为止，我所能得到的只是一个"placeholder"。
谁能告诉我我做错了什么?
鼠标悬停在上的代码如下:

 .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(d.CCode + " " +d.DocNumber + "<br>" 
         +d.DocName + "<br>"
         + "Filing Date =" + formatTime(d.FilingDate) + "<br>"
         + "Status=" + d.Status + "<br>" 
         + '"<img src=/Images/"'+d.DocNumber+'".jpeg>"')  
            .style("left", (d3.event.pageX +10) + "px")     
            .style("top", (d3.event.pageY -28) + "px");    
        })

描述

删除图像标签周围的单引号以及d.p docnumber前后的单引号。以下是修改后的代码片段，您可以应用此

  .on("mouseover", function (d) {
     div.transition()
      .duration(200)
      .style("opacity", .9);
     div.html(d.CCode + " " + d.DocNumber + "<br>"
      + d.DocName + "<br>"
      + "Filing Date =" + formatTime(d.FilingDate) + "<br>"
      + "Status=" + d.Status + "<br>"
      + "<img src=/Images/" + d.DocNumber + ".jpeg>")
     .style("left", (d3.event.pageX + 10) + "px")
     .style("top", (d3.event.pageY - 28) + "px");
  });
相关文章：