Блог

Моя цель состоит в том, чтобы связать подсветку между рисунком на одной панели и картой на второй панели. Для моих целей я хочу выбрать (выделить) данные на одной панели и выделить выбранные данные красным цветом на обеих панелях, а не затемнять невыбранные данные. Это должно работать независимо от того, какая панель используется для выбора данных. Ниже у меня есть два подхода, оба из которых выделяют данные между двумя панелями, но выделяют цвет, а затемнение вызывает проблемы с функциональностью.

Подход А: В этом подходе я сопоставляю с помощью листовки, чтобы избежать картографического поля. Я также использую mode ='markers lines' , так как в моих реальных данных точки данных расположены очень близко вдоль оси x, и соединение данных линией визуально полезно, хотя это создает проблему функциональности, которую я описываю ниже кода.

 library(plotly)
library(dplyr)
library(leaflet)
library(htmlwidgets)
library(crosstalk)

set.seed(1)
dat <- tibble(name = letters[1:21]
              , latitude = seq(38.6,38.8,0.01)
              , longitude = seq(-86.4,-86.8,-0.02)
              , var.x = 1:21
              , var.y = runif(21))

dat.a <- highlight_key(dat)

p <- plot_ly(dat.a) %>%
  add_trace(x = ~var.x, y = ~var.y
            , text = ~name
            , alpha = 0.8
            , mode = 'markers lines', type = 'scatter'
            , color = I("#1f77b4")
            , showlegend = FALSE) %>%
  highlight(on = "plotly_selected"
            , off = "plotly_deselect"
            , opacityDim = 1
            , color='red') 

map <- leaflet(dat.a) %>%    
  addTiles() %>%
  # addProviderTiles(providers$CartoDB.Positron) %>%
  addCircles(lat = ~latitude
             , lng = ~longitude
             , stroke = TRUE
             , color = I("#1f77b4")
             , weight = 3
             , opacity = .8) %>%
  highlight(on="plotly_selected")

bscols(widths = c(5, 7)
       , p, map)
 

Подход к комментариям: На приведенном ниже снимке экрана я выбрал 4 точки данных на рисунке (левая панель), где y Проблема 2: После выбора на рисунке (левая панель) добавляется красная линия между точками как var.x= 5 и var.x=10. (Решение проблемы 2, которое просто включает выделение символов, а не линий на рисунке (левая панель), является приемлемым).

Approach B: In this approach I map with plotly which is nice because of the more advanced selection features in the map

 library(plotly)
library(dplyr)
library(htmlwidgets)
library(crosstalk)

set.seed(1)
dat <- tibble(name = letters[1:21]
              , latitude = seq(38.6,38.8,0.01)
              , longitude = seq(-86.4,-86.8,-0.02)
              , var.x = 1:21
              , var.y = runif(21))

dat.a <- highlight_key(dat)

p <- plot_ly(dat.a) %>%
  add_trace(x = ~var.x, y = ~var.y
            , type = "scatter"
            , text = ~name
            , alpha = 0.8
            , mode = 'lines markers'
            , color = I("#1f77b4")
            , showlegend = FALSE) %>%
  highlight(on = "plotly_selected"
            , off = "plotly_deselect"
            , opacityDim = 1
            , color = 'red')

map <- plot_ly(dat.a) %>% 
  add_trace(lon = ~longitude, lat = ~latitude
          , type = "scattermapbox"
          , text = ~name
          , alpha = 0.8
          , mode = "marker"
          , color = I("#1f77b4")
          , hoverinfo = ~name) %>%
  # Plot the data again but using the original data
  add_trace(lon = ~longitude, lat = ~latitude
            , data = dat
            , type = "scattermapbox"
            , text = ~name
            , alpha = 0.8
            , mode = "markers"
            , color = I("#1f77b4")
            , showlegend = FALSE) %>%
  layout(
    mapbox = list(
      style = 'open-street-map',
      zoom = 8.5,
      center = list(lon = mean(dat$longitude), 
                    lat = mean(dat$latitude)))) %>%
  highlight(on = "plotly_selected"
            , off = "plotly_deselect"
            , color = 'red')

bscols(p, map, widths = c(5, 7))
 

Approach B comments: When running the code, selecting data from the figure (left panel) properly highlight the data in the map (right panel)—this appears to work repeatedly. Issue 1: Upon initial running of the code, selecting data from the map (right panel) properly highlight the data in the figure (left panel) the first time. Subsequent selections from the map result do not get the desired red coloring and also dims the non-selected points. Issue 2 (same as Approach A issue 2): Upon selection, the figure (left panel) adds a red line between points as var.x= 5 and var.x=10. (A solution to issue 2 that just involves highlighting the symbols and not the lines in the figure (left panel) is acceptable).