Parsing graphml file in cytoscape.js using cytoscape-graphml.js

I am working on a cytoscape.js project. I have a graphml file ( an XML- based file format for the representation of graphs) which I need to display on the browser. For this, I am using an extended library cytoscape-graphml.js to import graph from a graphml file. Everything is working fine but the problem is that the position of nodes is lost.

I looked into the code of cytoscape-graphml.js and found out that this library ignores all the details of nodes and only reads the 'id' of nodes. Below is a piece of code from this library:

$graph.children("node").each(function () {
var $node = $(this);

      var settings = {
        data: {id: $node.attr("id")},
        css: {},
        position: {}
      };

I am interested in the position of nodes. A node in my graphml file looks like this:

<node id="n0">
      <data key="d0">
        <y:ImageNode>
          <y:Geometry height="48.0" width="48.0" x="-24.0" y="694.0"/>
          <y:Fill color="#CCCCFF" transparent="false"/>
          <y:BorderStyle color="#000000" type="line" width="1.0"/>
          <y:NodeLabel alignment="center" autoSizePolicy="content" backgroundColor="#FFFFFF" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasLineColor="false" height="18.701171875" modelName="sides" modelPosition="e" textColor="#000000" visible="true" width="39.34375" x="52.0" y="14.6494140625">Server</y:NodeLabel>
          <y:Image refid="1"/>
        </y:ImageNode>
      </data>
      <data key="d1"/>
    </node>

I want to edit the code in the library so that it can read the value of 'x' and 'y' at least for my format of graphml file. I tried something like this but I got (0, 0) for x and y:

$graph.children("node").each(function () {
      var $node = $(this);

      var x = 0, y = 0;

      $node.children('data').each(function () {
        var $data = $(this);

        $data.children('ImageNode').each(function () {
          var $image_node = $(this);

          $image_node.children('Geometry').each(function () {
            var $geometry = $(this);

            x = parseInt($geometry.attr('x') );
            y = parseInt($geometry.attr('y') );
          });
        });

      });


var settings = {
        data: {id: $node.attr("id")},
        css: {},
        position: {x: x, y: y}
      };

Could anyone suggest how to do it?

Accessing the children using index worked for me.

$graph.children("node").each(function () {
      var $node = $(this);

      var x = 0, y = 0;

      $node.children(0).each(function () {
          var $data = $(this);

          $data.children(0).each(function () {
            var $image_node = $(this);

              {
                x = parseInt($image_node.children(0).attr('x'));
                y = parseInt($image_node.children(0).attr('y'));
              }


              console.log(x, y);
            });
        });
    });
});