2014-09-26 2 views
3

루트 노드의 색을 화면의 다른 노드와 다른 색으로 지정하고 싶습니다. 이미 루트 노드의 값을 확인하기 위해 사전 작업을 수행했습니다. 변수로 쉽게 사용할 수 있습니다. 그러나 그래프 스타일을 만들 때 아무 일도 일어나지 않으며이를 통해 디버깅하기가 어렵습니다.내용을 기반으로 한 Cytoscape.js 스타일 노드

예 :

nodes: [{id = 1}, {id=2}] 

var startingNode = 1; //root node 

$('#cy').cytoscape({ 
       style: [ 
        { 
         selector: 'node', 
         css: { 
          'content': 'data(id)', 
          'background-color': 'red', 
          'color': 'black', 
          'border-width': '1px', 
          'border-color': 'black' 
         } 
        }, 
        { 
         selector: "node[content = 'startingNode']", 
         css: { 
          'content': 'data(id)', 
          'background-color': 'purple', 
          'color': 'black', 
          'border-width': '1px', 
          'border-color': 'black' 

         } 
        }] 

// more info for cytoscape rendering omitted 

}); 

모든 입력이 도움이 될 것입니다!

감사합니다, 폴 G.

content 노드의 data 작동하지 않을 것입니다

답변

4

,하지 않는 한. 노드 ID (예 : foo)가있는 경우 #foo 또는 [id = 'foo']을 선택 자로 사용할 수 있습니다.

+0

위 예 참조 : '선택기 '노드 [= startingNode ID] 그러나' 작동하지 않는다 : '선택 '노드 [이드 = "1"]'않는다는 IS 내 변수의 범위 지정에 문제가 있습니까? 그리고 접근법에 대한 제안이라면? –

+0

연결 또는 ES6에서 사용할 수있는 문자열 템플릿없이 JS가있는 문자열에서 변수를 참조 할 수 없습니다. 이것은 당신을 도울지도 모른다 : http://www.quirksmode.org/js/strings.html – maxkfranz

+0

굉장하고, 모든 것을 완전히 잊었다. 'selector : 'node [id = "'+ startingNode + '"]'' 완벽하게 작동했습니다. 도움을 제공해 주셔서 감사합니다! –

관련 문제