为 Cytoscape 边缘设置控制点？

Question

我正在尝试在 Cytoscape 中构建一个降序图。我已经完成了大部分工作，但现在我陷入了边缘类型。我想使用类似“段”曲线样式的东西，其中我的边缘有点。

但是，我希望边缘限制为水平/垂直线，而不是之字形。

我的图表非常受限，用户无法操纵位置。我希望边缘从“父”元素开始，直接向下移动一定量，然后击中一个点，转动，水平移动到与子元素相同的 X，然后直接向下到达子元素。

现在，线条是笔直的，我可以轻松添加线段，但它们不受限制，并且基于百分比，如果不做大量数学运算，我就无法获得这些百分比，我想这并不可怕。

当前：

期望：

Answer 1

如果您想要

segments

边缘上的特定绝对位置，则需要将绝对坐标转换为为

segments

边缘指定的相对坐标。

如果您想要为您的用例使用不同类型的边缘，请随时在问题跟踪器中提出。

Answer 2

在@maxkfranz回答之后，这里有一个函数，它允许您将绝对坐标中的锚点列表转换为打字稿中的边缘相对坐标：

/**
 * Use Matrix power to convert points from an absolute coordinate system to an edge relative system
 *
 * Visually explained by https://youtu.be/kYB8IZa5AuE?si=vJKi-MUv2dCRQ5oA<br>
 * Short version ==> https://math.stackexchange.com/q/1855051/683621
 * @param source Position position of the edge source:  {x:number, y:number}
 * @param target Position position of the edge target:  {x:number, y:number}
 * @param toConvert Array of Position to convert to the edge-relative system
 * @return The points converted to relative coordinates {distances: number[], weights: number[]}
 */
function absoluteToRelative(source: Position, target: Position, toConvert: Position[]): RelativePosition {
  const relatives: RelativePosition = {distances: [], weights: []};
  if (toConvert.length === 0) return relatives;

  const mainVector = array([target.x - source.x, target.y - source.y]); // Edge vector
  const orthoVector = array([-mainVector.y, mainVector.x]) // Perpendicular vector
    .normalize(); //Normalized to have the distance expressed in pixels https://math.stackexchange.com/a/413235/683621
  let transform = array([
    [mainVector.x, mainVector.y],
    [orthoVector.x, orthoVector.y],
  ]).inv(); // Should always be invertible if the ortho vector is indeed perpendicular

  for (let coord of toConvert) {
    const absolute = array([[coord.x - source.x, coord.y - source.y]]);
    const relative = absolute.multiply(transform);
    relatives.weights.push(relative.get(0, 0))
    relatives.distances.push(relative.get(0, 1))
  }

  return relatives;
}

type Position = { x:number, y:number };
type RelativePosition = { distances: number[], weights: number[] };

这里我使用包[电子邮件受保护]来促进所有所需的矩阵和向量操作