Javascript Sigma-JS选择和着色节点
我在基于鼠标单击更改SigmaJS图形上的节点颜色时遇到困难。我已经阅读了sigma文档，并查看了相关内容 目前，它正在根据单选按钮选择执行不同的操作，但这与问题无关 两个问题： 如何仅获取所选节点。现在我使用jQuery在所有节点上执行循环。理想情况下，我只想要一个已经点击。我已尝试将数组发送到Javascript Sigma-JS选择和着色节点,javascript,jquery,sigma.js,Javascript,Jquery,Sigma.js,我在基于鼠标单击更改SigmaJS图形上的节点颜色时遇到困难。我已经阅读了sigma文档，并查看了相关内容 目前，它正在根据单选按钮选择执行不同的操作，但这与问题无关 两个问题： 如何仅获取所选节点。现在我使用jQuery在所有节点上执行循环。理想情况下，我只想要一个已经点击。我已尝试将数组发送到s.graph.nodes（），但不起作用 如何更改节点的颜色？文档中说，node.color='Some color'是实现这一点的方法，但我甚至无法从现有节点检索原始颜色，更不用说存储新颜色了 fu
s.graph.nodes（）node.color='Some color'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);
$.each(s.graph.nodes(), function(node){
console.log(node);
node.color = '#000';
s.refresh({ skipIndexation: true })
});
}
};
<!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>
#图形容器{
最大宽度：400px；
高度：600px；
左边距：自动；
右边距：自动；
}
在…上
关
变量sw_id
$（文档）.ready（函数（）{
$（'input[type=radio]'）。单击（函数（）{
如果（this.id==“开关”）
警报（该值）；
sw_id=该值；
控制台日志（sw_id）；
});
});
var s=新西格玛({
容器：'graph_container'，
渲染器：{
容器：document.getElementById（'graph_container'），
键入：“画布”，
},
设置：{
边距：10，
地雷大小：2，
最大尺寸：2，
明尼苏达州：3，
maxNodeSize:14，
标签阈值：2，
标签对齐：“中心”，
节点功率比：1.3，
边长比：1，
自动调整大小：正确，
自动缩放：对，
标签编号：20，
}
});
var摄像机=s摄像机[0]；
sigma.canvas.nodes.withHighlight=函数（节点、上下文、设置）{
变量前缀=设置（“前缀”）| |“”；
context.fillStyle=node.color | |设置（'defaultNodeColor'）；
context.beginPath（）；
context.arc(
节点[前缀+x']，
节点[前缀+y']，
节点[前缀+大小]，
0,
Math.PI*2，
真的
);
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，“目标”：3，“源”：0，“颜色”：“#1A70B9”，“大小”：1}，{“id”：4，“目标”：4，“源”：0，“颜色”：“#1A70B9”，“大小”：1}），
“节点”：[{“标签”：“狗”，“颜色”：“#F6851F”，“边框颜色”：“#1A70B9”，“id”：0，“大小”：10，“x”：2，“y”：2，“边框宽度”：4}，
{“标签”：“鼠标”，“颜色”：“F6851F”，“边框颜色”：“1A70B9”，“id”：1，“大小”：6，“边框大小”：2，“x”：5，“y”：2，“边框宽度”：4}，
{“标签”：“奶酪”，“颜色”：“F6851F”，“边框颜色”：“1A70B9”，“id”：2，“大小”：2，“x”：4，“y”：2，“边框宽度”：4}，
{“label”：“cat”，“color”：“F6851F”，“borderColor”：“1A70B9”，“id”：3，“size”：8，“x”：3，“y”：5，“borderwidth”：4}，
{“标签”：“鱼”，“颜色”：“F6851F”，“边界颜色”：“1A70B9”，“id”：4，“大小”：4，“x”：1，“y”：3，“边界宽度”：4}]，
“directed”：false，“multigraph”：false，“graph”：{}
s、 graph.read（初始状态）
s、 开始力场2（{重力：2，
比例：20，
减速：100}）
setTimeout（函数（）{s.stopForceAtlas2（）；}，2000）
函数trigsig（sig_json）{
s、 killForceAtlas2（）；
var sig_json=jQuery.parseJSON（sig_json）；
s、 graph.clear（）；
s、 graph.read（sig_json）；
sigma.misc.animation.camera(
摄像机，
{比率：1，x:0，y:0，角度：0}，
{持续时间：150}
);
s、 startForceAtlas2（{重力：0，
比例：3，
减速：50}）
setTimeout（函数（）{s.stopForceAtlas2（）；}，12000）
s、 刷新（）；
};
功能（事件、状态）{
如果（sw_id==1）{
console.log（“不做任何事情”）
}否则{
console.log（状态）
log（“Hiight节点”）；
日志（event.type、event.data.node.id、event.data.captor）；
//var构造=[event.data.node.id]
$.each（s.graph.nodes（），函数（node）{
console.log（节点）；
node.color='#000'；
s、 刷新（{skipIndexation:true}）
});
}
};
s、 绑定（'clickNode'，函数（e）{
butBinder（东、西、南）
});
clickNode可以在节点上创建任何属性，并将其持久化。在本例中，我创建了
isSelecteds.bind('clickNode', function(e) {
if (e.data.node.isSelected) {
e.data.node.color = "#666";
e.data.node.isSelected = false;
} else {
e.data.node.color = "#0A0";
e.data.node.isSelected = true;
}
s.refresh();
});