Hoverを使用してインタラクティブグラフのコード（スクレイピング用）を表示する方法

Question

ポインタがどこにホバーしているかに基づいて異なる情報を表示するインタラクティブなプロットをスクラップしたいと思います。このウェブサイトは私が興味を持っているものです：https://www.pelotoncycle.com/workout/c52db950f5ec4fde85cb3997c52db8db

それぞれの行について、行の異なる部分にカーソルを置いたときに、その行に表示される情報を削りたいと思います。私は過去に動的ローディングのウェブサイトをこすりするのpython +セレンを使用していた

0.13 power 70.1 
0.58 power 74.9 
1  power 94.8 
and so on, repeating for each line 

が、どのように確認していない：例えば、赤のラインのために、左から始まり、右に行く、私はこすりしたいと思いますこの特定の問題に対処する。私は試してみましたが、この情報がコードのどこに含まれているかを見つけることに失敗しました。ページソースHTMLにありません。私はまた、Firefox + FirebugやChrome Canaryを使ってinspect要素の機能を使ってもそれを見つけることができません。

<circle cx="213.69063545150502" cy="161.03099999999998" r="6.5" stroke="#000000" stroke-width="1" stroke-opacity="0.05" fill-opacity="1" fill="none"> 

残念ながら、これはライン上ではなくホバリングボックスに含まれている実際の情報にサークルを参照するように表示されます。関連するコードを検索しようとしたときに、私が得ることができる最も近いが、このようなものです。

私は何を試すべきですか？

Answer 1

何が起こるかは、ホバーを含む別の要素が各ポイントのチャートにオーバーレイされるということです。良いことは、各ホバーに対して、単一のCSSセレクターを作成できることです。ホバーはパフォーマンスチャートの最後の<g>タグに表示され、情報が必要なすべてのポイントを取得し、それぞれを1つずつホバリングし、次のCSSセレクタを使用して情報を収集することによって、データを収集できます。

g>text[text-anchor='start'][font-weight=bold] 

はい、処理が遅くなりますが、機能します。必要に応じて、JavaScriptを使用して必要なデータを取得することもできますが、その場合はウェブサイトのJSコードをより深く理解する必要があります。