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

Question

我正在开发 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}
      };

有人可以建议如何做吗？

Answer 1

使用索引访问 child 对我有用。

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