cytoscape.js에서 베 지어 곡선을 사용하는 방법

좋아, 웃지 마. 소스와 대상 사이에있는 노드 주변을 우회하는 곡선 형 가장자리를 만들려고합니다. 나는 그것을하는 방법을 알아낼 수 없었습니다 ( http://js.cytoscape.org/#style/bezier-edges를 읽었 지만 이해하지 못했습니다), 그래서 나는 도중에 빈 장소에 가짜 노드를 넣었습니다. 소스를 대상으로하고 일련의 가장자리를 만들었습니다. 결과는 매우 우스꽝 스럽습니다.

이를 수행하는 올바른 방법은 무엇입니까? 나는 다음과 같이 약간 더 우아한 것을 목표로하고 있었다.

에서 http://twitter.github.io/labella.js/

를 기반으로 @maxkfranz 내가 가까이 많이 얻었다 아래의 조언 :

but finally decided to give up. It's taking too long. Going back to straight edges. If anyone ever reads this and can describe a way to accomplish my goal in Cytoscape.js or some other tool, I'd love to hear it.

To be clear about what I'm doing before giving up, I:

• lay out nodes on grid such that there is always an empty grid cell between any two nodes on the same row (this is less than ideal because the empty cells should preferably be as narrow as possible)
• for every row on the grid layout between source and target nodes:
  • specify a "waypoint" closest to the direct path from source (or the previous waypoint) to target that passes through an empty grid cell,
  • convert row/col coordinates of the waypoint into pixel coordinates,
  • convert those into distance/weight values (based on function described here)
  • use those for unbundled bezier control points.

Here's the most relevant part of my code:

  function waypoints(from, to) {
    let stubPoint = { row: from.data().row, col: from.data().col, 
                      distance: 0, weight: .5, };
    if (from.data().layer === to.data().layer)
      return [stubPoint];
    let fromCol = from.data().col, 
        curCol = fromCol,
        toCol = to.data().col,
        fromRow = from.data().row,
        curRow = fromRow,
        toRow = to.data().row,
        fromX = from.position().x,
        fromY = from.position().y,
        toX = to.position().x,
        toY = to.position().y,
        x = d3.scaleLinear().domain([fromCol,toCol]).range([fromX,toX]),
        y = d3.scaleLinear().domain([fromRow,toRow]).range([fromY,toY]);
    let rowsBetween = _.range(fromRow, toRow).slice(1);
    let edgeLength = pointToPointDist(x(fromCol),y(fromRow),x(toCol),y(toRow));
    let points = rowsBetween.map(
      (nextRow,i) => {
        let colsRemaining = toCol - curCol;
        let colsNow = Math.ceil(colsRemaining / Math.abs(toRow - curRow));
        let nextCol = findEmptyGridCol(nextRow, curCol, curCol + colsNow);
        let curX = x(curCol), curY = y(curRow),
            nextX = x(nextCol), nextY = y(nextRow);
        let [distanceFromEdge, distanceOnEdge] = 
              perpendicular_coords(curX, curY, toX, toY, nextX, nextY);

        let point = {curCol, curRow, 
                      toCol, toRow,
                      nextCol, nextRow,
                      curX, curY, toX, toY, nextX, nextY,
                      edgeLength,
                      colsNow,
                      //wayCol, wayRow,
                      distance:-distanceFromEdge * 2, 
                      weight:distanceOnEdge / edgeLength,
                    };
        curCol = nextCol;
        curRow = nextRow;
        return point;
      });
    if (points.length === 0)
        return [stubPoint];
    return points;
  }