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

【问题标题】：Parsing graphml file in cytoscape.js using cytoscape-graphml.js使用 cytoscape-graphml.js 解析 cytoscape.js 中的 graphml 文件
【发布时间】：2019-12-10 18:25:16
【问题描述】：

我正在处理一个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}
      };

有人能建议怎么做吗？

【问题讨论】：

标签： javascript cytoscape.js cytoscape-web

【解决方案1】：

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

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

【讨论】：