루프 모서리 유형 또는 자식-부모 모서리에 대해 다른 모서리 형태를 선택할 수 있습니까?

AntonAntonoff

예 1 :

elements: [{
      data: {
        id: 'a'
      }
    },
    {
      data: {
        id: 'b',
        parent: 'a'
      }
    },
    {
      data: {
        id: 'ab',
        source: 'b',
        target: 'a'
      }
    }
  ],
  style: [{
    selector: 'edge',
    css: {
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle'
    }
  }]

노드에서 부모로 가장자리를 그리려고합니다. 다음과 같이 노드에서 외부 프레임까지 직선이있을 것으로 예상합니다.

그러나 대신 다음과 같은 곡선이 생겼습니다.

예 2 :

소스와 타겟이 같은 엣지를 만들려고하면 그 형태는 항상 곡선입니다 (엣지 유형 데모의 루프 엣지 유형처럼).

이렇게 커브 스타일을 선택해도 :

cy.add([{
    data: {
        "source": guid,
        "target": guid,
    },
    style: {
        "curve-style": "bezier",
        "source-endpoint": '0% 0%',
        "target-endpoint": '0% -80%'
    },
}])

나는 다음과 같은 곡선을 얻습니다.

직선 곡선 스타일에도 동일하게 적용됩니다.

루프에 대해 다른 가장자리 양식을 어떻게 그릴 수 있습니까?

굶주린

cytoscape.js를 포크하지 않고는 가능할지 모르겠지만 틀릴 수 있습니다.

https://codepen.io/Raven0us/pen/yLYZbJx

표시되지 않는 고스트 노드를 사용하는 해결 방법은 다음과 같습니다.

cy.$('edge.with-compound').forEach((edge, i) => {
    // parent node is edge source
    let position = calculateGhostNodePosition(edge.source());

    // ghost node id needs to keep a reference to the node that was used to calculate its position
    let ghostNodeId = `ghost-${edge.source().id}`;
    cy.add({
        group: 'nodes',
        data: {
            id: ghostNodeId
        },
        position: {
            x: position.x,
            y: position.y
        },
        classes: ['ghost-node']
    });

    cy.add({
        group: 'edges',
        data: {
            id: `${ghostNodeId}-edge`,
            source: edge.data('target'),
            target: ghostNodeId,
            classes: ['ghost-node-connector']
        }
    })
})

cy.$('node[parent]').on('position', e => {
    let node = e.target;
    let targetGhostNode = cy.$(`node[id="ghost-${node.id}"]`);

    let position = calculateGhostNodePosition(node);

    targetGhostNode.position({
        x: position.x,
        y: position.y
    })
})

/**
 *
 * @param sourceNode
 * @returns {{x: number | SVGAnimatedLength, y: *}}
 */
function calculateGhostNodePosition(sourceNode) {
    let boundingBox = sourceNode.boundingBox();

    // you need to actually calculate these and take node size in account
    let x = boundingBox.x1;
    let y = boundingBox.y1 + ((boundingBox.y2 - boundingBox.y1) / 2) + 8;

    return {
        x: x,
        y: y
    }
}

고스트 노드 위치가 제대로 계산되지 않은 경우 복합 노드 경계 상자에서 얻을 수 있습니다. 이렇게하면 가장자리를 완전히 제어 할 수 있습니다. 또한 네트워크를 내보낼 때 네트워크 데이터를 기반으로 항상 다시 그릴 수 있어야하므로 "보조 에지"를 버리는 것을 고려해야합니다.

추신-복합 노드가 끌 리면 고스트 노드 위치도 다시 계산해야합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-01-24

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

이전 게시물：Postman에서 일부 HTTP 메소드 제한

TOP 리스트

기사