如何点击Cytoscape边获取终端节点坐标（无需JSON转换）

你遇到的问题是因为直接将position()返回的对象与字符串拼接时，JavaScript会默认调用对象的toString()方法，结果就是[object Object]。其实完全不需要用JSON.parse(JSON.stringify())来序列化，直接操作position()返回的对象即可，下面是两种简单的实现方式：

方法1：直接访问对象的x、y属性 #

在点击事件中，获取节点的position对象后，直接访问其x和y属性：

cy.on('click', 'edge', function(e) {
  const srcNode = this.source();
  const tgtNode = this.target();
  
  console.log(`Src: ${srcNode.id()}, Target: ${tgtNode.id()}`);
  
  // 直接获取坐标
  const srcX = srcNode.position().x;
  const srcY = srcNode.position().y;
  const tgtX = tgtNode.position().x;
  const tgtY = tgtNode.position().y;
  
  console.log(`Src(x,y): ${srcX}, ${srcY}`);
  console.log(`Tgt(x,y): ${tgtX}, ${tgtY}`);
});

方法2：对象解构赋值 #

用ES6的解构语法直接提取x和y，代码更简洁：

cy.on('click', 'edge', function(e) {
  const srcNode = this.source();
  const tgtNode = this.target();
  
  console.log(`Src: ${srcNode.id()}, Target: ${tgtNode.id()}`);
  
  // 解构获取坐标
  const { x: srcX, y: srcY } = srcNode.position();
  const { x: tgtX, y: tgtY } = tgtNode.position();
  
  console.log(`Src(x,y): ${srcX}, ${srcY}`);
  console.log(`Tgt(x,y): ${tgtX}, ${tgtY}`);
});

完整修改后的代码 #

把上述逻辑整合到原代码中，完整代码如下：

JavaScript代码 #

var cy = cytoscape({
  container: document.getElementById("cy"),

  elements: {
    nodes: [{
        data: {
          id: "UK",
          name: "UK"
        },
        position: {
          x: 100,
          y: 100
        },
        classes: "text_UK"
      },
      {
        data: {
          id: "germany",
          name: "Germany"
        },
        position: {
          x: 270,
          y: 340
        },
        classes: "germany"
      }
    ],

    edges: [
      {
        data: {
          id: "UK2DE",
          source: "UK",
          target: "germany",
          label: "UK_DE"
        }
      }
    ]
  },

  style: [{
      selector: "node",
      style: {
        "background-color": "#bbbbbb",
        label: "data(name)",
        width: 60,
        height: 60,
        opacity: 1.0
      }
    },
    {
      selector: "edge",
      style: {
        label: "data(label)",
        width: 3,
        "line-color": "#000000",
        "curve-style": "bezier",
        "target-arrow-shape": "triangle",
        "arrow-scale": 2
      }
    },
    {
      selector: "edge#UK2DE",
      style: {
        label: "data(label)",
        "source-label": "data(source)",
        "target-label": "data(target)",
        "source-text-offset": 20,
        "target-text-offset": 25,
        "text-rotation": "autorotate",
        width: 3,
        "line-color": "#c0c",
        "target-arrow-color": "#00c",
        "curve-style": "bezier",
        "target-arrow-shape": "triangle",
        "arrow-scale": 2
      }
    },
    {
      selector: ".highlight",
      css: {
        "background-color": "yellow"
      }
    }
  ],
  layout: {
    name: "preset"
  }
})

// 修改后的点击事件处理逻辑
cy.on('click', 'edge', function(e) {
  const srcNode = this.source();
  const tgtNode = this.target();
  
  console.log(`Src: ${srcNode.id()}, Target: ${tgtNode.id()}`);
  
  // 直接访问属性获取坐标
  const srcPos = srcNode.position();
  const tgtPos = tgtNode.position();
  
  console.log(`Src(x,y): ${srcPos.x}, ${srcPos.y}`);
  console.log(`Tgt(x,y): ${tgtPos.x}, ${tgtPos.y}`);
});

CSS代码 #

#cy {
  width: 60%;
  height: 70%;
  position: absolute;
  top: 4px;
  left: 4px;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.29.2/cytoscape.min.js"></script>
<div id="cy"></div>

原理说明：Cytoscape的position()方法返回的是一个包含x和y属性的普通JavaScript对象，你可以直接读取这些属性，完全不需要通过JSON序列化来复制对象。之前的序列化方法是绕了弯路，直接操作原对象的属性才是最直接高效的方式。

内容的提问来源于stack exchange，提问作者swatchai