如何添加圖像到工具提示NVD3在r

Question

我有一個數據框，我已經設法創建一個偉大的圖表，我很滿意的結果。

但是，我想添加一個特定的圖像，當用戶將鼠標懸停在某個點上時，該點與該點相關。由於這一切都是在一臺計算機上完成的，我想文件引用將保留爲數據框的一部分，然後以某種方式工具提示將讀取文件引用，然後顯示圖像預覽。這可能是所有JavaScript，但我真的不知道該怎麼做，或者如果這是最好的方法

這裏是我的數據框（不包括文件名引用圖片：

TTypedAll2<-structure(list(V1 = c(6L, 13L, 8L, 11L, 6L), TissueType = c("GC","Co","BE", "Tu", "Tu"), Sample = c("SL.Tum_TB05_00.fq.gz", "S.Tum_TB06.fq.gz", "S.Tum_T573.fq.gz", "Tum_TB0578.fq.gz", "TumTB0106.fq.gz"),Samplenum = 1:5), .Names = c("V1", "TissueType", "Sample", "Samplenum"), row.names = c("SL.Tum_TB05_00.fq.gz", "S.Tum_TB06.fq.gz", "S.Tum_T573.fq.gz", "Tum_TB0578.fq.gz", "TumTB0106.fq.gz"), class = "data.frame") 

併爲代碼劇情：

TTypedAll2$Sample<-as.character(TTypedAll2$Sample) 
TTypedAll2$Samplenum<-1:nrow(TTypedAll2) 
d3chart<-nPlot(V1~Samplenum, group='TissueType',  data=TTypedAll2,type="scatterChart") 

d3chart$chart(tooltipContent = "#! function(key, x, y, e){ 
    return '' + e.point.Sample 
} !#") 
d3chart 

require(rCharts) 
n1 <- nPlot(mpg ~ wt, group = 'gear', data = mtcars, type = 'scatterChart') 
n1$chart(tooltipContent = "#! function(key, x, y){ 
     return 'x: ' + x + ' y: ' + y 
     } !#") 

更新

我改變了被設置成使我增加了完整的圖像路徑我很感興趣，我的數據幀代碼，然後嘗試這樣做：

d3chart<-nPlot(V1~Samplenum, group='TissueType', data=TTypedAll2,type="scatterChart") 
d3chart$chart(tooltipContent = "#! function(item, x, y, e){ 
    return '' + e.point.Sample + '<img src=' + e.point.img + '>' 
      } !#") 
d3chart 

沒有錯誤，但我得到的是一個問號，而不是像

更新

好，我覺得我到達那裏，但可能有雙引號的問題。這是我迄今爲止，但它不顯示圖像，我認爲它是因爲文件路徑必須是在雙引號，但我無法弄清楚如何做到這一點

d3chart<-nPlot(V1~Samplenum, group='TissueType',  data=TTypedAll2,type="scatterChart") 
d3chart$chart(tooltipContent = "#! function(item, x, y, e,z){ 
return '' + e.point.Sample + '<img src=file:///Users/cer.png' + '>' 
      } !#") 
d3chart 

Answer 1

我不熟悉你的R設置，此JavaScript代碼將更改工具提示以顯示圖像：

nv.addGraph(function() { 
    var chart = nv.models.scatterChart(); 
    chart.xDomain([ 0, 10 ]).yDomain([ 0, 10 ]); 

    chart.tooltipContent(function(key, x, y, z, e) { 
     return '<img class="style-your-image" src="' + e.point.img + '">'; 
    }); 

    var myData = [ 
     { 
      key: 'Group 1', 
      values: [ 
       { x: 3, y: 5, size: 5, shape: 'circle', img: '/static/img/img_1.jpg' }, // image on local server 
       { x: 7, y: 5, size: 5, shape: 'circle', img: 'http://placehold.it/150x150' } // Web image 
      ] 
     } 
    ] 

    d3.select('#chart svg').datum(myData).call(chart); 
    nv.utils.windowResize(chart.update); 

    return chart; 
    });