如何在R中的工具提示NVD3中添加图像

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