如何使用csv數據文件中的名稱在工具提示中創建<img>標籤

我有隨時間變化的文檔歸檔散點圖。
我有一個工具提示框彈出的數據點的鼠標懸停，提供文本數據。我想在每個工具提示框中包含一個圖像。
該數據是從一個.csv文件包括多個字段，諸如DocName，FilingDate，DocNumber等
的圖像各自保存在「影像」文件夾作爲DocNumber.jpg的繪製。
我試圖湊齊了一段代碼，將從CSV文件拿起DocNumber和創建正確的HTML標籤，使圖像顯示 ....
到目前爲止，我的一切。設法得到是一個"placeholder"。
有人能告訴我我做錯了什麼嗎？
爲鼠標懸停的代碼如下：如何使用csv數據文件中的名稱在工具提示中創建<img>標籤

.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");  
     })

來源

2016-09-30 MareeA

您提示 –

看跌快照檢查引號' ' 「」'）' – Andreas

@MareeA讓你嚐嚐我下面的代碼片段？ –

說明

刪除全景圖像標籤中的單引號和前後也d.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"); 
    });

來源

2016-09-30 04:57:13

謝謝。我確實修改了代碼，以符合您的建議，但我仍然看到一個佔位符圖標而不是圖像。我即將回去並確保我沒有犯任何錯別字。 – MareeA

我是否需要在工具提示定義中添加任何內容以啓用圖像？目前我有：var div = d3.select（「body」）。append（「div」） .attr（「class」，「tooltip」） .style（「opacity」，0）; – MareeA

確定...發現問題...這是我..非常簡單的錯誤.....應該是src =圖像不是src = /圖像。現在代碼工作得很漂亮。 – MareeA

如何使用csv數據文件中的名稱在工具提示中創建<img>標籤

回答

相關問題