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

问题描述

在 cytoscape.js 下，段距离和段权重都设置为 0 的边缘线看起来不是直的，而是以不连贯的锯齿形（或滑行）方式。

边缘从节点的特定区域绘制到特定区域（通过使用源端点和目标端点）。边缘构造奇怪（而不是笔直）。如果没有为源端点和目标端点指定任何值，则边缘线按预期是直的，但我的代码需要使用源端点和目标端点。

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

使用以下代码，请参阅显示边缘线不完全笔直的输出：

如果将段权重更改为 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>

标签： javascriptshapescytoscape.js

我阅读了 maxkfranz 的评论，但找不到适合我的问题的合乎逻辑的答案。

在我的示例中，源端点和目标端点都以百分比定义，并且对应于节点内的一个位置。我在下图中指出了一些位置坐标的例子：

在我上面的代码中，源点的位置（即“25% -50%”）位于节点顶线上的第一个红点。目标点的逻辑相同。

如果将源点设置为 ("0% -50%") 并将目标点设置为 ("0% 50%") 并保持 : 'segment-distances' : 0, 'segment-weights': 0 则系统绘制完全符合预期的垂直直线：

但是在为段距离和段权重操作源点和目标点（即分别为（“50% -50%”）和（“50% -50%”）和“0”时，线不再是直的：

现在如果删除段距离和段权重的属性，那么线会出现偏差，见下文。它实际上应该画一条垂直的直线。

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

问题描述

解决方案

推荐阅读