我正在使用rCharts创建一个散点图，该散点图显示随着时间的推移我已经计算出的评分。我为每个单独的数据点（等级）提供了更多信息，并希望图表上的每个数据点都链接到具有有关该特定数据点的更多信息的唯一页面。
例如：我希望能够将鼠标悬停在图形的第一个数据点上，然后单击它以转到提供更多信息的特定页面（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的代码位的位置，并且afterScriptfor nvd3不在我们的视野之内，draw因此在图表绘制之前被称为。另外，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
希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句