使用 rCharts 添加到图表中所有数据点的唯一链接

我正在使用 rCharts 创建一个散点图，显示我随时间计算的评分。我有每个单独数据点（评级）的更多信息，并且希望图表上的每个数据点链接到一个独特的页面，其中包含有关该特定数据点的更多信息。

例如：我希望能够将鼠标悬停在图表上的第一个数据点上并单击它以转到特定页面（http://www.example.com/info?id=1 http://www.example.com/info?id=1）提供有关该评级或数据点的更多信息。每个数据点都有一个唯一的 ID 和我想要链接到的唯一 url。

这是我用来生成图表的代码

library(rCharts)
age <- c(1:20)
tall <- seq(0.5, 1.90, length = 20)
name <- paste(letters[1:20], 1:20, sep = "")
df <- data.frame(age = age, tall = tall, name = name)
n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
n1$xAxis(axisLabel = "the age")
n1$yAxis(axisLabel = "the tall", width = 50)
n1$chart(tooltipContent = "#! function(key, x, y, e ){ 
  var d = e.series.values[e.pointIndex];
  return 'x: ' + x + '  y: ' + y + ' name: ' + d.name
} !#")
n1

目前这绝对应该被认为是一种黑客攻击，但它确实有效。我们在这里面临的导致我们需要这种黑客攻击的问题是draw标准 rCharts 模板中的函数没有为我们提供为 nvd3 添加代码位的地方，并且afterScript因为 nvd3 不在我们的范围内drawso 在图表渲染之前调用。另外，nvd3 工具提示只是 html，但在此处提供单击链接的问题是，鼠标悬停会被触发，并且工具提示会在我们单击它之前消失（有趣的技巧，但没有用）。因此，在这个黑客中，我们将劫持工具提示内容函数来指定单击事件函数。

我试图澄清评论，但如果这些都没有意义，请告诉我。我当然不会因为支持而从事职业:)，所以我还没有建立这种技能。

  library(rCharts)

  age <- c(1:20)
  tall <- seq(0.5, 1.90, length = 20)
  name <- paste(letters[1:20], 1:20, sep = "")

  #this next line is not entirely necessary if other data
  #provides the part of the link address
  #will also comment in the js piece below to show
  #how to handle that
  links <- paste0("http://example.com/",name)

  df <- data.frame(age = age, tall = tall, name = name, links = links)
  n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
  n1$xAxis(axisLabel = "the age")
  n1$yAxis(axisLabel = "the tall", width = 50)
  n1$chart(tooltipContent = "#! function(key, x, y, e ){ 
    d3.selectAll('[class*=\"nv-path\"]').on('click',function(){
      //uncomment debugger if you want to see what you have
      //debugger;
      window.open(d3.select(this).datum().data['point'][4].links,'_blank');
      //as stated in the r code generating this
      //the link address might be in the data that we already have
      //window.open(
      //  'http://example.com/' + d3.select(this).datum().data['point'][4].name,
      //    '_blank'
      //);
    })
    //looks like the actual point is below the hover tooltip path
    //if tooltips disabled we could do click on the actual points
    //d3.selectAll('.nv-group circle').on('click',function(){
    //  debugger;
    //})
      var d = e.series.values[e.pointIndex];
      return 'x: ' + x + '  y: ' + y + ' name: ' + d.name
    } !#")

  n1

我希望它有帮助。