使用 casperjs 从 SVG 对象访问 'd' 元素

Question

我是 javascript/phantomjs/casperjs 的初学者（好像只学了几天），但我一直受困于这个 svg 图，我正试图从中删除数据。

我正在尝试使用 casperjs 代码从 SVG 对象访问 d="M20,331.37,331.37,21.40...." 元素，并写入控制台和 txt 文件（或 CSV）。我尝试以下代码：

var casper = require('casper').create({
    pageSettings: {
        loadImages: true,
        loadPlugins: true,
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
    }
});

//First step is to open baidu.html
casper.start().thenOpen("file:///baidu.html", function() {
    console.log("Baidu website opened");
    this.wait(6000);
});


casper.then(function() {
     var dataFromGraph = this.getElementsAttribute(require('casper').selectXPath('//*[@id="trend"]/svg/path[6]'),"d");
     this.echo(dataFromGraph);
     require('fs').write("data_graph.txt", dataFromGraph,'w');
});

casper.run();

但没有任何效果。我得到 NULL 元素或空结果。这是我尝试的所有其他代码：

 var dataFromGraph = this.fetchText(require('casper').selectXPath('//*[@id="trend"]/svg/path[6]/d'));
 var dataFromGraph = this.getElementsAttribute(require('casper').selectXPath('//*[@id="trend"]/svg/path[6]'),"d") //,"d")
 var dataFromGraph = this.getElementInfo(require('casper').selectXPath('//*[@id="trend"]/svg/path[6]'))
 var dataFromGraph = this.fetchText("#trend > svg > path");

我有对象的 Xpath 和选择器，但我不确定如何访问它。这是我要废弃的元素的图片。

由于我要删除的网站需要密码，这是我从中保存的 HTML 文件 https://ufile.io/5y9g2。

我要废弃的元素是这里图表背后的数据。

如有任何帮助，我们将不胜感激。

Answer 1

我稍微修改了您的脚本，现在它可以运行了。检查下面的代码段。

var fs = require('fs');
var casper = require('casper').create();

casper.start().thenOpen("http://localhost:8001/baidu.html", function() {
    console.log("Baidu website opened");
});

casper.then(function() {
  var graphData = this.evaluate(function() {
    return document.querySelector('#trend > svg > path:nth-child(11)').getAttribute('d')
  });
  this.echo(graphData);
  fs.write("data_graph.txt", graphData,'w');
});

casper.run();

希望对您有所帮助！

使用 casperjs 从 SVG 对象访问 'd' 元素

access the 'd' element from an SVG object with casperjs

javascript

svg

web-scraping

phantomjs

casperjs