Добавьте уникальные ссылки на все точки данных на графике с помощью rCharts

Я использую rCharts для создания диаграммы рассеяния, отображающей рейтинги, которые я рассчитал с течением времени. У меня есть больше информации для каждой отдельной точки данных (рейтинга), и я хотел бы, чтобы каждая точка данных на графике была связана с уникальной страницей с дополнительной информацией об этой конкретной точке данных.

Например: я хотел бы иметь возможность навести указатель мыши на первую точку данных на графике и щелкнуть ее, чтобы перейти на определенную страницу (http://www.example.com/info?id=1).), который предоставляет дополнительную информацию об этом рейтинге или данных. Каждая точка данных имеет уникальный идентификатор и уникальный 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

r rcharts
person Mostafa    schedule 25.06.2014    source источник
comment
Я знаю, что это работает с D3, но я не программист javascript! Извиняюсь   -  person Mostafa    schedule 25.06.2014
comment
Да, это возможно. Я постараюсь разработать один из способов атаки на него.   -  person timelyportfolio    schedule 27.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

На данный момент это определенно следует считать взломом, но это работает. Проблемы, с которыми мы здесь сталкиваемся и которые заставляют нас требовать этого хака, заключаются в том, что функция draw в стандартном шаблоне rCharts не дает нам места для добавления фрагментов кода для nvd3, а afterScript для 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

Я надеюсь, что это помогает.

person timelyportfolio    schedule 26.06.2014
comment
Спасибо большое дуд, это именно то, что я хочу! еще раз спасибо за понятное объяснение :) - person Mostafa; 30.06.2014
comment
отлично, дайте мне знать, если я могу помочь в любом другом случае. Как всегда, мы любим видеть творения rCharts, если это возможно, чтобы поделиться ими. n1$publish() - person timelyportfolio; 30.06.2014
comment
Да, с удовольствием, я создам страницу на github и опубликую ее (это будет блестящее приложение). Я буду держать вас в курсе! - person Mostafa; 30.06.2014