SigmaJS dragNodes：“instanceof 的右侧不是对象”？答案

【问题标题】：SigmaJS dragNodes: "Right hand side of instanceof is not an object"?SigmaJS dragNodes：“instanceof 的右侧不是对象”？
【发布时间】：2020-02-02 17:05:20
【问题描述】：

我正在使用 Sigmajs 处理节点图。最近我尝试在图中实现移动节点，但在 web 调试器中我收到一个错误提示 "TypeError: Right hand side of instanceof is not an object" 指的是插件sigma.plugins.dragNodes.js。

我遵循了 Sigmajs.org 的好人给出的名为 "drag-nodes.html" 的示例，我相信我已经正确地包含了这些包，但我得到了错误。 p>

web-debugger 引用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>

为什么这会给我这个错误？任何修复它的帮助表示赞赏。谢谢。

【问题讨论】：

你应该显示instanceof所在的地方。
已将其添加到帖子中！谢谢@web

标签： javascript sigma.js

【解决方案1】：

你有这个代码：

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

您应该检查 sigma.renderers.svg ( console.log(sigma.renderers.svg) ) 或其他内容，因为错误坚持认为它不是对象。可能是undefined、null 等...

检查您在哪里定义sigma.renderers.svg。

【讨论】：

【解决方案2】：

像往常一样，解决方案比我想象的要简单，但至少我在尝试解决它时学到了很多东西。该对象一直都是正确的，但我忘记了实现必要的渲染器。即使我不使用 SVG 类型，我也必须将 ../src/renderers/sigma.renderers.svg.js 作为脚本包包含在内。

感谢您的帮助！

【讨论】：