从交互式图表中抓取数据答案

【问题标题】：Web scraping data from an interactive chart从交互式图表中抓取数据
【发布时间】：2014-06-08 13:46:51
【问题描述】：

是否可以在this webpage中获取交互式图表背后的数据（对不起，网站需要登录）？

当我将鼠标悬停在图表上时，会显示数据，但我如何获取这些数据？

以下是该网站的 HTML 源代码摘录：

<svg height="460" version="1.1" width="1037" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>

<path style="" fill="none" stroke="#f1f1f1" d="M20,130L1017,130M20,159.66666666666666L1017,159.66666666666666M20,189.33333333333331L1017,189.33333333333331M20,219L1017,219M20,248.66666666666666L1017,248.66666666666666M20,278.3333333333333L1017,278.3333333333333M20,308L1017,308">
<path style="" fill="none" stroke="#f1f1f1" d="M295.0344827586207,130L295.0344827586207,337.66666666666663M295.0344827586207,365L295.0344827586207,415M535.6896551724138,130L535.6896551724138,337.66666666666663M535.6896551724138,365L535.6896551724138,415M776.3448275862069,130L776.3448275862069,337.66666666666663M776.3448275862069,365L776.3448275862069,415M1017,130L1017,337.66666666666663M1017,365L1017,415">
<path style="" fill="none" stroke="#cccccc" d="M17,337.66666666666663L1018,337.66666666666663">
<path style="" fill="none" stroke="#cccccc" d="M17,365L1018,365">
<rect x="20" y="130" width="997" height="207.66666666666666" r="0" rx="0" ry="0" fill="#ff0000" stroke="none" style="opacity: 0;" opacity="0">
<path style="" fill="none" stroke="#6e87d7" d="M20,281.030303030303L54.37931034482759,316.6902356902357L88.75862068965517,318.78787878787875L123.13793103448276,318.78787878787875L157.51724137931035,318.78787878787875L191.89655172413794,312.4949494949495L226.27586206896552,285.2255892255892L260.65517241379314,312.4949494949495L295.0344827586207,314.59259259259255L329.41379310344826,316.6902356902357L363.7931034482759,297.8114478114478L398.1724137931035,318.78787878787875L432.55172413793105,335.56902356902356L466.9310344827586,293.61616161616155L501.3103448275862,276.8350168350168L535.6896551724138,272.6397306397306L570.0689655172414,274.7373737373737L604.448275862069,272.6397306397306L638.8275862068965,216.00336700336698L673.2068965517242,216.00336700336698L707.5862068965517,239.07744107744105L741.9655172413793,281.030303030303L776.344827586207,144.68350168350165L810.7241379310345,245.37037037037032L845.1034482758621,239.07744107744105L879.4827586206897,247.46801346801345L913.8620689655172,245.37037037037032L948.2413793103449,245.37037037037032L982.6206896551724,207.61279461279457L1017,163.56228956228955" stroke-width="2">
<path style="" fill="none" stroke="#f1f1f1" d="M20,390L1017,390M20,415L1017,415">
<path style="opacity:

这些path 元素还有很多，我没有在这里粘贴。

【问题讨论】：

您是否尝试过查看此网页的源代码？另一方面：我没有看到图表，但我遇到了看起来像登录屏幕的东西。我看不出你明显看到了什么。
是的，我有。它有我以前从未见过的东西。
然后，最好研究一下使这些数据在悬停在它们上时出现的语言。如今，这些通常是 javascript 和/或一些 jQuery 魔术。无论如何，我仍然没有看到你所说的这张图表。你能确保你提供的链接是正确的并且不依赖于登录吗？
我很抱歉。它确实需要登录。我用萤火虫检查了元素，并设法找到了Created with Raphaël 2.1.0。刚google了一下，好像是javascript。感谢您的帮助。
我们必须查看源代码才能以特定方式回答这个问题。否则我们只能猜测，我的猜测是数据本身隐藏在数组中无数链接的 javascript 文件中，类似于使用另一个 javascript 绘图库 highcharts 所做的事情。所以它就像找到那个文件一样容易。请更新您的问题以反映此页面的源代码。

标签： python svg charts web-scraping

【解决方案1】：

您必须解析该信息（并根据您的标签猜测，您需要在 python 中执行此操作）。但是，快速查看Raphael documentation 后，我很确定您可以通过另一种更快的方式获取数据：数据必须以javascript 数组的形式存在于某处。试着先找那个。

最终，根据这个 javascript 数据，生成了您找到的 SVG。如果您查看 SVG Path element 描述，您会看到需要如何解释这些 M 和 L 定义，然后您应该能够将这些行解析为您喜欢的 (python) 数据集。

但是，我想再次声明，我们很难在没有图片的情况下找到您要查找的内容（是直方图，还是折线图？）。使用L 绘制的线条可能就是您所需要的。

例如，如果您采用您在 python 会话中列出的第一个路径，您可以这样做：

svg_string = "M20,130L1017,130M20,159.66666666666666L1017,159.66666666666666M20,189.33333333333331L1017,189.33333333333331M20,219L1017,219M20,248.66666666666666L1017,248.66666666666666M20,278.3333333333333L1017,278.3333333333333M20,308L1017,308"
import re
data = [map(float, xy.split(',')) for xy in re.split('[ML]', svg_string)[1:]]

请注意，这只能正常工作，因为Move 和Line 命令在此字符串中轮流使用。但看起来所有其他路径都是以类似的方式生成的（这让我更加强烈地认为数据集只是在您尚未查看的 javascript 文件中的某个位置）。

最后，要获取此源代码，您应该考虑使用urllib2 进行程序检索。

【讨论】：

它是一个折线图。感谢您的关注。我第一次遇到涉及 javascript 的抓取。

【解决方案2】：

在这种情况下，一个不错的选择是将 selenium 与 Python 中的 Scrapy 等抓取工具结合起来。

【讨论】：