Сканирование графика веб-активности с R и rvest;overbuff.com

Question

Веб-сайт overbuff.com позволяет отслеживать историю ваших игр в Overwatch и отображает график активности.Эта диаграмма основана на сложном html, который препятствует моей попытке собрать мои данные в R.К сожалению, мои навыки в html, CSS и веб-дизайне только на уровне новичка.

Я даю ниже минимального предела, на примере игрока с самым высоким рейтингом на overbuff.com.

Веб-сайт: https://www.overbuff.com/players/pc/FunnyAstro-2570/activity

Дата: **2016-06-30**

Когда вы наводите курсор мыши на зеленый круг, class = "day-popper" показывает информацию (выигрыш-проигрыш, символы) за этот день.Но только после того, как вы это сделаете, информация доступна в исходном коде сайта. Иллюстрация: Hover-over

С помощью Google Chrome я извлек XPath, селектор CSS и попробовал гаджет SelectorGadget.Гаджет выделил только зеленый кружок без информации.

Вот код, чтобы получить дату (2016-06-30)

# Example with the top-ranked player at the moment
library(rvest)
url <- "https://www.overbuff.com/players/pc/FunnyAstro-2570/activity"

# Test: Website is correctly received
mydata <- read_html(url) %>%
  html_nodes("h1") %>%
  html_text()
print(mydata)

# Xpath
mydata <- read_html(url) %>%
  html_nodes(xpath="/html/body/div[1]/div[3]/div/div[2]/div/div/div/section[1]/article/div/div[1]/div[2]/div/div[27]/div[6]/div[2]/div/div/div[1]/div[1]") %>%
  html_text()
print(mydata)
# Null

# CSS Selector
mydata <- read_html(url) %>%
  html_nodes(xpath="body > div.container.seemsgood > div.row.layout-content > div > div:nth-child(2) > div > div > div > section.activity-date-section > article > div > div:nth-child(1) > div.chart-wrapper > div > div:nth-child(27) > div:nth-child(6) > div.day-popper > div > div > div.sessions-header > div.sessions-date") %>%
  html_text()
print(mydata)
# Error

Как видите, я не былт успешно.Чтобы проиллюстрировать структуру веб-сайта, здесь вы найдете фрагмент HTML-кода за один день.

<div class="day-popper" data-placement="bottom" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-91px, 105px, 0px);">
  <div class="ActivitySessionsView">
    <div class="sessions-container">
      <div class="sessions-header">
        <div class="sessions-date">2016-06-30</div>
        <div class="sessions-record"><span class="color-stat-win">17</span><span class="sep">-</span><span class="color-stat-loss">4</span></div>
      </div>
      <div class="session-detail mode-competitive">
        <div class="session-header">
          <div class="session-stat session-mode">
            <div class="value">Competitive<span class="small"> S1</span><i class="session-mode-icon fa fa-trophy"></i></div>
            <div class="label">updated at 7:21 AM</div>
          </div>
          <div class="session-stat session-record">
            <div class="value"><span class="color-stat-win">17</span><span class="sep">-</span><span class="color-stat-loss">4</span></div>
            <div class="label">Record</div>
          </div>
        </div>
        <div class="session-heroes">
          <div class="session-hero"><img class="image-hero image-hero-lucio image-small" src="/assets/images/heroes/lucio.png?v=8f65c97" alt="Lúcio"><small><span class="color-stat-win">12</span><span class="sep">-</span><span class="color-stat-loss">0</span></small></div>
          <div class="session-hero"><img class="image-hero image-hero-mercy image-small" src="/assets/images/heroes/mercy.png?v=8f65c97" alt="Mercy"><small><span class="color-stat-win">2</span><span class="sep">-</span><span class="color-stat-loss">0</span></small></div>
          <div class="session-hero"><img class="image-hero image-hero-pharah image-small" src="/assets/images/heroes/pharah.png?v=8f65c97" alt="Pharah"><small><span class="color-stat-win">1</span><span class="sep">-</span><span class="color-stat-loss">0</span></small></div>
          <div class="session-hero"><img class="image-hero image-hero-torbjorn image-small" src="/assets/images/heroes/torbjorn.png?v=8f65c97" alt="Torbjörn"><small><span class="color-stat-win">1</span><span class="sep">-</span><span class="color-stat-loss">0</span></small></div>
        </div>
      </div>
    </div>
  </div>
</div>

Я хочу извлечь эту информацию за все доступные дни и подделать в следующем формате.

library(tibble)
tibble(time=rep("2016-06-30",4), 
       hero=c("Lucio", "Mercy","Phara","Torbjörn"),
       win=c(12,2,1,1),
       loss=c(0,0,0,0)
       )

Ouput

    # A tibble: 4 x 4
  time       hero       win  loss
  <chr>      <chr>    <dbl> <dbl>
1 2016-06-30 Lucio      12.    0.
2 2016-06-30 Mercy       2.    0.
3 2016-06-30 Phara       1.    0.
4 2016-06-30 Torbjörn    1.    0.

Answer 1

При использовании селектора CSS помните об атрибутах, поэтому для класса вы используете точку "."в качестве префикса, например,

mydata <- read_html(url) %>%
  html_nodes(".sessions-date") %>%
  html_text()
print(mydata) 

определенно даст вам дату, вы также можете использовать «#» для «id».

, если есть более одного элемента с селекторомкласс, вы получите вектор.

Надеюсь, это поможет.