0
마우스 클릭을 기준으로 SigmaJS 그래프에서 노드 색을 변경하는 데 어려움이 있습니다. 시그마 문서를 읽고 SO를 살펴 보았습니다.시그마 JS 선택 및 채색
현재 라디오 버튼 선택에 따라 다른 작업을 수행하고 있지만 이는 문제와 관련이 없습니다.
두 가지 질문 :
선택한 노드 만 얻는 방법. 지금은 모든 노드에서 루프를 수행하기 위해 jQuery를 사용하고 있습니다. 이상적으로 나는 단지 클릭 한 것을 원한다. s.graph.nodes(<array>) 배열을 보내려고했지만 그 작동하지 않습니다.
노드 색상을 어떻게 변경합니까? 문서에 따르면 node.color = 'Some Color'이이를 수행하는 방법이지만 기존 노드에서 원래 색을 검색 할 수 없기 때문에 새로운 색을 저장하게합니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#graph_container {
max-width: 400px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="sw_switch">
<input type="radio" id="r1" name="rate" value="1"> On
<input type="radio" id="r2" name="rate" value="2"> Off
</div>
<section class="webdesigntuts-workshop">
<form action = "/send" method= "post" class="ajax">
<input type="text" name="message" vertical-align: "top" placeholder="Choose a word..." >
<input type="submit" value="Search" vertical-align: "top" id="sub_send">
</form>
</section>
<div id="graph_container"></div>
<script src="\static/sigma.min.js"></script>
<script src="\static/sigma.parsers.json.min.js"></script>
<script src="\static/jquery-3.1.0.min.js"></script>
<script src="\static/sigma.layout.forceAtlas2.min.js"></script>
<script>
var sw_id
$(document).ready(function(){
$('input[type=radio]').click(function(){
if (this.id == "sw_switch")
alert(this.value);
sw_id = this.value;
console.log(sw_id);
});
});
var s = new sigma({
container: 'graph_container',
renderer: {
container: document.getElementById('graph_container'),
type: 'canvas',
},
settings: {
sideMargin: 10,
minEdgeSize: 2,
maxEdgeSize: 2,
minNodeSize: 3,
maxNodeSize: 14,
labelThreshold: 2,
labelAlignment: 'center',
nodesPowRatio: 1.3,
edgesPowRatio: 1,
autoResize: true,
autoRescale: true,
labelSizeRatio: 20,
}
});
var camera = s.cameras[0];
sigma.canvas.nodes.withHighlight = function(node, context, settings) {
var prefix = settings('prefix') || '';
context.fillStyle = node.color || settings('defaultNodeColor');
context.beginPath();
context.arc(
node[prefix + 'x'],
node[prefix + 'y'],
node[prefix + 'size'],
0,
Math.PI * 2,
true
);
context.closePath();
context.fill();
};
var sig_json = {}
var init_state = {"edges": [{"id": 1, "target": 1, "source": 0, "color":"#1A70B9", "size" : 1}, {"id": 2, "target": 2, "source": 0, "color":"#1A70B9", "size" : 1},
{"id": 3, "target": 3, "source": 0, "color":"#1A70B9", "size" : 1}, {"id": 4, "target": 4, "source": 0, "color":"#1A70B9", "size" : 1}],
"nodes": [{"label": "dog", "color": "#F6851F", "borderColor": "#1A70B9", "id": 0, "size": 10, "x": 2, "y": 2, "borderwidth": 4},
{"label": "mouse", "color": "#F6851F", "borderColor": "#1A70B9", "id": 1, "size": 6, "borderSize": 2, "x": 5, "y": 2, "borderwidth": 4},
{"label": "cheese", "color": "#F6851F", "borderColor": "#1A70B9", "id": 2, "size": 2, "x": 4, "y": 2, "borderwidth": 4},
{"label": "cat", "color": "#F6851F", "borderColor": "#1A70B9", "id": 3, "size": 8, "x": 3, "y": 5, "borderwidth": 4},
{"label": "fish", "color": "#F6851F", "borderColor": "#1A70B9", "id": 4, "size": 4, "x": 1, "y": 3, "borderwidth": 4}],
"directed": false, "multigraph": false, "graph": {}}
s.graph.read(init_state)
s.startForceAtlas2({gravity: 2,
scalingRatio:20,
slowDown:100})
setTimeout(function() { s.stopForceAtlas2(); }, 2000)
function trigsig(sig_json){
s.killForceAtlas2();
var sig_json = jQuery.parseJSON(sig_json);
s.graph.clear();
s.graph.read(sig_json);
sigma.misc.animation.camera(
camera,
{ ratio: 1, x: 0, y: 0, angle: 0 },
{ duration: 150 }
);
s.startForceAtlas2({gravity:0,
scalingRatio:3,
slowDown:50})
setTimeout(function() { s.stopForceAtlas2(); }, 12000)
s.refresh();
};
function butBinder(event, state){
if (sw_id == 1){
console.log("DO NOTHING")
}else{
console.log(state)
console.log("Hiight Node");
console.log(event.type, event.data.node.id, event.data.captor);
//var construct = [event.data.node.id]
$.each(s.graph.nodes(), function(node){
console.log(node);
node.color = '#000';
s.refresh({ skipIndexation: true })
});
}
};
s.bind('clickNode', function(e){
butBinder(e, sw_id, s)
});
</script>
</body>
</html>