从交互式图表中抓取数据

Question

我正在尝试检索在本页 javascript 中生成图表的数据：

https://www.energy-charts.de/price.htm

我找到了用 M 和 L 元素画线的 SVG 元素，但我不知道从哪里开始寻找 javascript 数组实际数据。（我假设某处一定有一个数组）。

对于我需要开始寻找这些数据的任何提示和提示，我深表感谢。

Answer 1

简答

数据存储在 JSON 文件中 https://www.energy-charts.de/price/week_2019_21.json

长答案

如果您打开开发人员工具 (F12)，您可以从文件 price.js 中看到 console.log 的负载。其中大部分都没有用，但是 got chartTitle from JSON! _chartTitle: Electricity production and spot prices in Germany in week 21 2019 这行看起来对我们有用。

打开 price.js 并搜索 "got chartTitle"，我找到了一个名为 createChart 的函数，它似乎正在加载 JSON 个文件。我假设这些将从某种 API 返回，而不是直接存储在 JS 文件中。

从 "got chartTitle" 向上滚动，我注意到这一行： d3.json(filepath, function(error, json) {。对我来说，这是从文件路径加载 JSON。搜索 "filepath"，我发现它被声明为一个全局变量。在 javascript 控制台中输入这个，我看到值是“./price/week_2019_21.json”，所以导航到那个 URL (https://www.energy-charts.de/price/week_2019_21.json) 应该是您正在寻找的数据！

这个URL是在下面的代码块中计算的：

if(defaultweek < 10){
  filepath = "./price/week_" + defaultyear +"_0"+ defaultweek +".json"; //default file on first-load
}
else{
  filepath = "./price/week_" + defaultyear +"_"+ defaultweek +".json"; //default file on first-load
}

默认值设置在energy-charts_default.js。

希望对您有所帮助！

从交互式图表中抓取数据

Scraping data from an interactive chart

javascript

charts

svg

screen-scraping

web-scraping