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

问题

I am a very beginer in javascript/phantomjs/casperjs (like only several days of learning) but I am stuck with this svg graph I am trying to scrap data from.

I am trying to access the d="M20,331.37,331.37,21.40...." element from an SVG object using a casperjs code, and write in the console and a txt file (or CSV). I try the following code:

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();

But nothing worked. I get NULL element or empty result. This is all the other code I try:

 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");

I have the Xpath and the selector of the object but I am not sure how to acces it. Here is a picture of the element I want to scrap.

As the website I want to scrap need a password, this is the HTML file that I save from it https://ufile.io/5y9g2.

The element I want to scrap is the data behind the graph here.

Any help would be very appreciated.

回答1:

I reworked your script a bit and now it works. Check the snippet below.

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();

Hope that helps!

来源：https://stackoverflow.com/questions/48110288/access-the-d-element-from-an-svg-object-with-casperjs

标签

javascript

svg

web-scraping

phantomjs

casperjs