javascript - 使用cytoscape-graphml.js解析cytoscape.js中的graphml文件

我正在做一个cytoscape.js项目。我有一个graphml文件（用于图形表示的基于XML的文件格式），需要在浏览器上显示。为此，我正在使用扩展库cytoscape-graphml.js从graphml文件导入图形。一切工作正常，但问题是节点的位置丢失了。

我查看了cytoscape-graphml.js的代码，发现该库忽略了节点的所有详细信息，仅读取节点的“ id”。
以下是该库中的一段代码：

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

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

我对节点的位置感兴趣。我的graphml文件中的一个节点如下所示：

<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>

我想编辑库中的代码，以便至少可以读取我的graphml文件格式的“ x”和“ y”值。我尝试过类似的操作，但x和y分别为（0，0）：

$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}
      };

有人可以建议如何做吗？

最佳答案

使用索引访问孩子对我有用。

$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);
            });
        });
    });
});

关于javascript - 使用cytoscape-graphml.js解析cytoscape.js中的graphml文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58858412/