如何使用悬停查看交互式图形的代码（用于抓取）答案

【问题标题】：How to View Code (for Scraping) of Interactive Graph with Hover如何使用悬停查看交互式图形的代码（用于抓取）
【发布时间】：2016-11-16 16:21:56
【问题描述】：

我想抓取一个交互式绘图，根据指针悬停的位置显示不同的信息。这个网站是我感兴趣的：https://www.pelotoncycle.com/workout/c52db950f5ec4fde85cb3997c52db8db

对于每一行，当一个人悬停在行的不同段上时，我想抓取框中显示的信息。比如红线，从左到右，我想刮：

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

我过去曾使用 python+Selenium 来抓取动态加载的网站，但不知道如何处理这个特定问题。我已经尝试过，但未能成功找到代码中包含此信息的位置。它不在页面源 HTML 中。当我使用他们的检查元素功能时，我也无法使用 Firefox+Firebug 或 Chrome Canary 找到它。尝试查找相关代码时，我能得到的最接近的是这样的：

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

不幸的是，这似乎是指线上的圆圈，而不是悬停框中包含的实际信息。

对我应该尝试什么有什么建议吗？

【问题讨论】：

标签： python selenium web-scraping screen-scraping

【解决方案1】：

发生的情况是包含悬停的另一个元素覆盖在图表上的每个点。好消息是每次悬停都可以创建一个 CSS 选择器。悬停出现在性能图表的结尾<g> 标记中，可以通过获取所有需要信息的点来收集数据，将它们逐个悬停，然后使用以下 CSS 选择器收集信息。

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

是的，这是一个缓慢的过程，但它确实有效。如果你愿意，你也可以使用 JavaScript 来获取你需要的数据，但这需要更深入地研究网站的 JS 代码。

【讨论】：

谢谢你，@sagarwadhwa1。您是如何看到使您能够写下 CSS 选择器的代码的？您使用了什么流程来解决我的问题？
我不得不在另一个应用程序中自动化同一张图表。在 HTML 代码中找到与悬停对应的元素需要花费很多精力，但之后就很容易了。单击检查元素窗口中的 HTML 代码，并使用鼠标将鼠标悬停在图表上一段时间。
我似乎无法得到它，因为当代码从我悬停时发生变化时，因为我必须移动鼠标来选择正确的代码。
是的，这可能有点棘手。您必须在单独的窗口中打开开发工具，然后保持焦点，使用鼠标将鼠标悬停在数据点上。然后，使用键盘箭头键导航并找到悬停元素。