2016-07-25 2 views
1

cytoscape.js에서 가장자리 너비 다이어그램과 같은 Sankey를 만드는 방법은 무엇입니까? 분명히하기 위해, 나는 cytoscape.js에서 Sankey 다이어그램을 만들고 싶지 않습니다. 내가 원했던 것은 그들이 생성 한 노드의 크기가 전체적으로있는 가장자리를 만드는 것입니다.Cytoscapejs : Sankey와 같은 가장자리 크기

가장자리 너비를 수정하는 한 가지 방법은 강도 속성을 사용하는 것이지만 원래 노드 크기와 관련하여이 속성을 지정하는 방법을 찾지 못했습니다. 사전에

감사

앤디

답변

1

당신은 데이터 매퍼를 사용하고 단지 초기화에서 각 요소에 대해 data.width을 설정할 수 있습니다

var cy = cytoscape({ 
    container: $('.cytoscape-container').get(0), 
    ..., 
    style: { 
    { 
     selector: 'edge', 
     style: { 
     'width': 'data(size)' 
     } 
    } 

    { 
     selector: 'node', 
     style: { 
     'width': 'data(size)', 
     'height': 'data(size)' 
     } 
    } 
    } 
}); 

아니면 그냥 클래스를 사용할 수 있습니다

var cy = cytoscape({ 
    container: $('.cytoscape-container').get(0), 
    ..., 
    style: { 
    { 
     selector: 'edge.foo', 
     style: { 
     'width': 20 
     } 
    } 

    { 
     selector: 'node.foo', 
     style: { 
     'width': 20, 
     'height': 20 
     } 
    } 
    } 
}); 
+0

절대적으로 필요한 경우가 아니라면 맞춤 함수를 사용하지 않는 것이 가장 좋습니다. micromanaging 성능을 담당합니다. 캐싱을 사용하지 않는 한 사용자 정의 함수를 사용하여 큰 속도 저하를 일으 킵니다. 또한, 스타일을 쓸 때 독서 스타일은 경쟁 조건을 만들어 내기 때문에 의미가 없습니다. 클래스 나 숫자를 사용하여 스타일 시트의 가장자리와 노드에 동일한 너비를 설정하면됩니다. 스타일 시트의 내장 기능을 사용하면 라이브러리가 무거운 짐을 덜어줍니다. – maxkfranz

+0

좋은 점은 각 렌더링에서 모든 함수 호출의 성능입니다. 나는 큰 그래프 (많은)로 얼마나 빨리 저하되는지보기 위해 노력하지 않았고, 문서는 "필요하다면 피하지 말라"라는 강조 표시를하지 않았다. 아마 추가되어야 할 것 같다. 절차 적으로 생성해야한다고 제안하지 않는 한 클래스는 데이터 중심 노드 크기에 자연스럽게 맞지 않는 것처럼 보입니까? – peteorpeter

+1

.data()에 대한 전화는 스타일이있는 자동 조종 장치에 있습니다. 모두 perf에 최적화되어 있습니다. .data()를 호출하여 노드 크기를 변경하면 Cytoscape가 자동으로 캐싱을 수행합니다. 함수 호출을 잘 관리하지 않으면 Cytoscape가 함수에 대한 가정을 할 수 없기 때문에 스타일을 다시 계산할 수있을 때마다 필요합니다. Cytoscape가 스타일 시트 블록과 diff-patch 스타일 업데이트의 정적 분석을 수행 할 수 있기 때문에 두 번째와 같은 정적 스타일 시트가 perf에서 더 좋습니다. – maxkfranz

관련 문제