如何用Python抓取Truflation交互式折线图的悬浮弹窗数据

核心问题分析 #

• 弹窗是鼠标悬停后才动态生成的，页面加载完成时弹窗并不存在，直接定位会失败。
• 使用了已弃用的Selenium语法（find_element_by_class_name），且该方法返回单个元素，无法循环遍历。
• SVG元素的定位需要特殊处理，普通XPATH规则可能不适用。

修正后的代码方案 #

先确保安装最新版Selenium：

pip install selenium

以下是可运行的完整代码，包含鼠标悬停模拟、显式等待、SVG元素定位逻辑：

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import pandas as pd

# 初始化浏览器（Mac系统下ChromeDriver无需.exe后缀，注意路径匹配）
driver = webdriver.Chrome()
driver.get("https://app.truflation.com/")
driver.maximize_window()

# 显式等待图表加载完成
wait = WebDriverWait(driver, 10)
chart_svg = wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="trufrate-timeframe"]')))

# 获取图表上所有可触发弹窗的时间点元素（根据实际DOM调整标签类型）
time_points = chart_svg.find_elements(By.TAG_NAME, 'path')

# 存储数据的列表
inflation_records = []

# 遍历时间点，模拟悬停并提取数据
for point in time_points:
    try:
        # 模拟鼠标悬停触发弹窗
        ActionChains(driver).move_to_element(point).perform()
        
        # 等待弹窗可见（需根据实际弹窗的class调整定位器）
        popup = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, 'tooltip')))
        
        # 提取日期和通胀数据（根据弹窗内部DOM结构调整）
        date = popup.find_element(By.XPATH, './/div[contains(@class, "date")]').text
        inflation_rate = popup.find_element(By.XPATH, './/div[contains(@class, "value")]').text
        
        inflation_records.append({"日期": date, "通胀率": inflation_rate})
        print(f"日期: {date}, 通胀率: {inflation_rate}")
    except Exception:
        # 跳过无法提取数据的时间点
        continue

# 转换为DataFrame
df = pd.DataFrame(inflation_records)
print("\n提取到的数据集：")
print(df)

# 关闭浏览器
driver.quit()

关键调整说明 #

• 显式等待：用WebDriverWait确保元素加载完成，避免页面未就绪导致的定位失败。
• 鼠标悬停模拟：通过ActionChains触发弹窗显示，这是获取动态弹窗数据的核心步骤。
• SVG元素定位：先定位整个SVG图表容器，再在其内部查找子元素，确保能正确定位时间点。
• 弹窗定位适配：实际弹窗的class可能不是overlay，需按F12打开开发者工具，悬停弹窗查看真实DOM结构，调整代码中的定位器。
• 新语法兼容：采用Selenium 4+的By类进行元素定位，替代已弃用的旧方法。

额外提示 #

1. 打开浏览器开发者工具（F12），切换到Elements标签，悬停弹窗确认其class和内部元素结构，调整代码中的定位规则。
2. 如果图表的时间点不是path元素，可能是circle或其他标签，需修改find_elements(By.TAG_NAME, ...)的参数。
3. Mac系统下ChromeDriver无需.exe后缀，路径需改为实际的可执行文件路径。

内容的提问来源于stack exchange，提问作者h0204663