Question

我很难根据鼠标点击更改SigmaJS图表上的节点颜色。我已经阅读了sigma文档并查看了SO。

目前，它根据单选按钮选择执行不同的操作，但这与问题无关。

两个问题：

如何仅获取所选节点。现在我使用jQuery在所有节点上执行循环。理想情况下，我只想要点击的那个。我已尝试将数组发送到s.graph.nodes( <array> )，但这不起作用。

如何更改节点的颜色？文档说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>

Answer 1

您可以使用clickNode事件选择节点并更改其颜色可以在节点上创建任何属性，它将被保留。在这个例子中，我创建了isSelected

s.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();
});

Sigma JS选择和着色节点

1 个答案: