如何根据cytoscape中不同的边缘颜色来布局连接？

// 创建cytoscape实例
var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
    nodes: [
      { data: { id: 'node1' } },
      { data: { id: 'node2' } },
      { data: { id: 'node3' } }
    ],
    edges: [
      { data: { id: 'edge1', source: 'node1', target: 'node2', color: 'red' } },
      { data: { id: 'edge2', source: 'node2', target: 'node3', color: 'blue' } },
      { data: { id: 'edge3', source: 'node3', target: 'node1', color: 'green' } }
    ]
  },
  layout: {
    name: 'grid'
  },
  style: [
    {
      selector: 'edge',
      style: {
        'curve-style': 'unbundled-bezier',
        'control-point-distances': function(edge) {
          // 根据边缘的颜色属性设置线条的弯曲程度
          if (edge.data('color') === 'red') {
            return '100px';
          } else if (edge.data('color') === 'blue') {
            return '200px';
          } else if (edge.data('color') === 'green') {
            return '300px';
          }
        },
        'target-arrow-shape': 'triangle'
      }
    }
  ]
});