javascript - 即使距离和重量设置为零，获得直边线的问题-6ren

javascript - 即使距离和重量设置为零，获得直边线的问题

转载作者：行者123 更新时间：2023-11-30 06:14:06

在 cytoscape.js 下，段距离和段权重都设置为 0 的边缘线看起来不是直的，而是以不连贯的之字形(或出租车)方式出现。

边缘是从节点的特定区域绘制的，也绘制到节点的特定区域(通过使用源端点和目标端点)。边缘 build 得很奇怪(而且不直)。如果没有为 source-endpoint 和 target-endpoint 指定任何值，那么边线会像预期的那样直，但我的代码需要使用 source-endpoint 和 target-endpoint。

如果我设置 'segment-weights': 0.5，那么线条构建得更好，但边缘仍然出现额外的点，这再次看起来不一致，因为 'segment-distances' 设置为 0。请注意，我的代码使用曲线样式作为“段”以及段距离和段权重，所以我必须设置这些特定值。

使用以下代码，查看显示边缘线不完全笔直的输出:

如果将段权重更改为 0.5，那么我得到了输出。为什么距离为0:

我的代码有误吗？

要使边缘线看起来笔直，我需要进行哪些更改？

我的代码如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tool</title>
        <meta charset=utf-8 />
        <script src="cytoscape.min.js"></script>
    <style> 
    body { 
      font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
      height: 90%;
      width: 65%;
      position: absolute;
      left: 0;
      top: 1;
      background-color: WHITESMOKE;
      border: 5px solid #ddd;
      overflow: auto !important;
      border-radius: 1.25em;
    }   
    </style>
    </head>
    <body>
            <div id="cy"></div>
        <script>
    var dataOpticalMap =
    {
      "nodes": [
             {
              "data": {"id":"44", "name":"C"},
              "position": {"x":729, "y":-25}
             },
             {
              "data": {"id":"84", "name":"A"},
              "position": {"x":729, "y":75}
             },
      ],
      "edges": [
             {
              "data": {"id":"96", "source":"84", "target":"44" },
             },
        ]
    }

    var cy = cytoscape({
      container: document.getElementById('cy'),
      style: cytoscape.stylesheet()

        .selector('node')       //Generic style applied for each node irrespective of their type
          .css({
            'content': 'data(name)',
            'text-valign': 'center',
            'width': 80,
            'height': 30,
            'shape': 'barrel',
          })
        .selector('edge')       //Generic style applied for each edge
          .css({
            'curve-style': 'segments',
            'edge-distances': 'node-position',
            'segment-distances' : 0,
            'segment-weights': 0,
            'source-endpoint' : "25% -50%",
            'target-endpoint': "25% 50%",
          }),

      elements: {      
      nodes:dataOpticalMap.nodes, 
      edges:dataOpticalMap.edges
      },
        autolock:false,
      layout: {
        name: 'preset',
        directed: true,
        fit: true
      }
    });
        </script>
    </body>
</html>