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

Question

我正在研究 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 从 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' 的值。我试过这样的事情但是我得到了 (0, 0) for x 和 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}
      };

有人可以建议怎么做吗？

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

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

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

javascript

cytoscape-web

cytoscape.js