Sigma JS dragNodes: "Правая часть instanceof не является объектом"?

Question

Я играю с графами узлов, используя Sigma js. Недавно я попытался внедрить движущиеся узлы в графе, но в веб-отладчике я получаю сообщение об ошибке: «TypeError: правая часть instanceof не является объектом» со ссылкой на плагин sigma.plugins.dragNodes.js.

Я последовал примеру хороших людей из Sigma js .org, назвавшим "drag-node. html" , и я считаю, что правильно включил пакеты, но я получаю ошибка.

Веб-отладчик ссылается на два места в файле sigma.plugins.dragNodes.js: (в строке 64)

if (renderer instanceof sigma.renderers.svg) {
    _mouse = renderer.container.firstChild;
}

и (в строке 304)

if (!_instance[s.id]) {
  _instance[s.id] = new DragNodes(s, renderer);
}

Это мой код:

<script src='{{ url_for("static", filename="js/sigma.min.js") }}'></script>
<script src='{{ url_for("static", filename="js/sigma.parsers.json.min.js") }}'></script>
<script src='{{ url_for("static", filename="js/sigma.plugins.dragNodes.js") }}'></script>


<div>
    <button onclick="AddNode()"> Click</button>
</div>
<div>
    <!-- testing function -->
    <button onclick="update()"> update</button>
</div>
<div> <!-- ONSUBMIT send: (fromNode, toNode) Not complete -->
    <input type="text" maxlength="2" name="value" id="value" />
    <input type="button" value="submit" onclick="AddEdge()" />
</div>
<div id="container">
<style>
 #graph-container {
    max-width: 800px;
    height: 500px;
    margin: auto;
 }
</style>

<div id="graph-container"></div>
</div>

<script>
var nodeCount = 0,
    edgeCount = 0,
    s,
    maxNodes = 20,
    maxEdges = 50,
    g = {
        nodes: [],
        edges: []
    }

s = new sigma({
    graph: g,
    container: 'graph-container',
    renderers:[ {
        container: document.getElementById('graph-container'),
        type: 'canvas'
    }],
    settings: {

    }
});

// Testing function only
function PrintNodes(){
    var edgeval = document.getElementById('value').value[0];
    alert(edgeval);
}

function AddNode() {
    s.graph.addNode({
        id: 'n' + nodeCount,
        label: 'Node ' + nodeCount,
        x: nodeCount,
        y: 5,
        size: 8,
        color: '#000000'
    });
    nodeCount =nodeCount +1;
    s.refresh();
}
function AddEdge() {
    var fromNode = document.getElementById('value').value[0];
    var toNode = document.getElementById('value').value[1];
    s.graph.addEdge({
        id: 'e' + edgeCount,
        source: 'n' + fromNode,
        target: 'n' + toNode,
        size: 8,
        color: '#FF0000'
    });
    edgeCount = edgeCount + 1;
    s.refresh();
}

// Testing function only
function update(){
    s.graph.nodes().forEach(function(n){
        n.size = 34,
        n.color = '#000'
    });
    s.refresh();
}

// Initialize the dragNodes plugin:
var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);

dragListener.bind('startdrag', function(event) {
  console.log(event);
});
dragListener.bind('drag', function(event) {
  console.log(event);
});
dragListener.bind('drop', function(event) {
  console.log(event);
});
dragListener.bind('dragend', function(event) {
  console.log(event);
});


</script>

Почему это дает мне такую ​​ошибку? И любая помощь, чтобы исправить это ценится. Благодаря.

Answer 1

Как обычно, решение оказалось более простым, чем я думал, но, по крайней мере, я многому научился, пытаясь его решить. Объект был правильным все время, но я забыл реализовать необходимые средства визуализации. Несмотря на то, что я не использую SVG-тип, мне нужно было включить ../src/renderers/sigma.renderers.svg.js, включенный в пакет сценариев.

Спасибо за помощь!

Answer 2

У вас есть этот код:

if (renderer instanceof sigma.renderers.svg) {
    _mouse = renderer.container.firstChild;
}

Вы должны проверить sigma.renderers.svg (console.log(sigma.renderers.svg)) или что-то еще, потому что, как утверждает ошибка, это не объект. Это может быть undefined, null et c ...

Проверьте, где вы определяете sigma.renderers.svg.