cytoscape.js冗余边

Question

如果图形有冗余的边/弧，则cytoscape.js无法呈现该图形。为什么会发生这种情况？

示例：

https://jsfiddle.net/smiccke/mq5t1rw9/4/

​

$(function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    ready: function() {},
    style: [{
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    }, {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    }],
    elements: {
      nodes: [{
        data: {
          id: 'j',
          name: 'Jerry'
        }
      }, {
        data: {
          id: 'e',
          name: 'Elaine'
        }
      }, {
        data: {
          id: 'k',
          name: 'Kramer'
        }
      },
      ],
      edges: [{
        data: {
          source: 'j',
          target: 'e'
        }
      }, {
        data: {
          source: 'j',
          target: 'k'
        }
      }
      ]
    }
  });
});

​

如果从末尾(j->e，j->e)移除两个冗余边，则该图可以工作。

似乎一个多余的边缘是可以的，但两个或更多的是一个问题。有什么线索吗？

作为解决办法，有什么好的捷径从图形中删除多余的边吗？

Answer 1

所有的边缘都在那里。您已经将所有的平行边呈现在另一个上，因为这就是您的边缘样式的指定方式。

对正在呈现的图形类型使用适当的样式。例如，多图应该使用具有非零干草堆半径的干草堆边或捆绑的bezier边。

参考文档中的curve-style等：http://js.cytoscape.org/#style/edge-line

Answer 2

编辑:您提到cytoscape.js无法呈现图形，但是对我来说很好。你真的一点都没看到图吗？如果是的话，您使用的是哪个浏览器，是否检查了代码中的错误？

默认情况下，节点之间的多个边缘与maxkfranz所说的路径相同。您可以设置显示所有边缘的'curve-style': 'bezier'，或者使用'haystack-radius': 1保持直线(播放0到1之间的值)。

我还注意到你打开了箭头。这些不适用于默认的'haystack'曲线样式，所以如果您想要可视化有向边缘，我建议您使用'bezier'。