시각화 관련된 js를 트래킹 하던중 cytoscape.js를 써봤다. 튜토리얼기반으로 쓴다.
JS다운로드 예제 |
html코드다.
<!DOCTYPE html><html><head><meta name="description" content="[Visual style example]" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><meta charset=utf-8 /><title>Visual style example</title><!-- script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script --><script src="cytoscape.js-2.0.2/arbor.js"></script><script src="cytoscape.js-2.0.2/cytoscape.js"></script><script src="cytoscape.js-2.0.2/jquery.cytoscape-edgehandles.js"></script><style id="js-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style></head><body><div id="cy"></div><script>
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': 'mapData(weight, 30, 100, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': '#888',
'color': 'data(faveColor)'
})
.selector(':selected')
.css({
'background-color': 'pink',
'line-color': 'pink',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector('edge.questionable')
.css({
'line-style': 'dashed'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry', weight: 65, faveColor: 'lightblue' } },
{ data: { id: 'e', name: 'Elaine', weight: 45, faveColor: 'pink' } },
{ data: { id: 'k', name: 'Kramer', weight: 75, faveColor: 'lightgreen' } },
{ data: { id: 'g', name: 'George', weight: 70, faveColor: 'beige' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' }, classes: 'questionable' },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
ready: function(){
window.cy = this;
// giddy up
cy.elements().unselectify();
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}
});
</script></body></html>
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style></head><body><div id="cy"></div><script>
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': 'mapData(weight, 30, 100, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': '#888',
'color': 'data(faveColor)'
})
.selector(':selected')
.css({
'background-color': 'pink',
'line-color': 'pink',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector('edge.questionable')
.css({
'line-style': 'dashed'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry', weight: 65, faveColor: 'lightblue' } },
{ data: { id: 'e', name: 'Elaine', weight: 45, faveColor: 'pink' } },
{ data: { id: 'k', name: 'Kramer', weight: 75, faveColor: 'lightgreen' } },
{ data: { id: 'g', name: 'George', weight: 70, faveColor: 'beige' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' }, classes: 'questionable' },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
ready: function(){
window.cy = this;
// giddy up
cy.elements().unselectify();
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}
});
</script></body></html>
'이것저것(독후감같은거)' 카테고리의 다른 글
| git push origin --delete feature/cluster_kk_server (0) | 2016.01.15 |
|---|---|
| playframework in java (2.4.4) (0) | 2015.11.26 |
| http error code (0) | 2015.11.10 |
| webform 디자인을 읽고.. (0) | 2015.11.10 |
| perl 쓰레드와 fork를 테스트한 스크립트 블로깅.. (0) | 2015.11.10 |