javascript - 西格玛.js。有向图。箭头不渲染

Question

我在使用 Sigma.js 渲染有向图的箭头时遇到问题。

我的 GEXF 图:

<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd">
  <meta lastmodifieddate="2015-05-11">
    <creator>Gephi 0.8.1</creator>
    <description></description>
  </meta>
  <graph defaultedgetype="directed" mode="static">
    <nodes>
      <node id="startNode" label="Initial resources">
        <attvalues></attvalues>
        <viz:size value="1.0"></viz:size>
        <viz:position x="1.0" y="1.0" z="0.0"></viz:position>
        <viz:color r="153" g="153" b="153"></viz:color>
      </node>
      <node id="node1" label="node1">
        <attvalues></attvalues>
        <viz:size value="1.0"></viz:size>
        <viz:position x="100.0" y="0.0" z="0.0"></viz:position>
        <viz:color r="153" g="153" b="153"></viz:color>
      </node>
      <node id="node2" label="node2">
        <attvalues></attvalues>
        <viz:size value="1.0"></viz:size>
        <viz:position x="200.0" y="0.0" z="0.0"></viz:position>
        <viz:color r="153" g="153" b="153"></viz:color>
      </node>
    </nodes>
    <edges>
      <edge source="startNode" target="node1" label="res1">
        <attvalues></attvalues>
      </edge>
      <edge source="node1" target="node2">
        <attvalues></attvalues>
      </edge>
    </edges>
  </graph>
</gexf>

我的 Sigma.js 脚本:

    s = new sigma({
        container : 'content',
        renderer : {
            container : document.getElementById('content'),
            type : 'canvas'
        },
        settings : {
            minNodeSize : 12,
            maxNodeSize : 12
        },
        drawingProperties : {
            defaultEdgeArrow : 'source'
        }
    });
    sigma.parsers.gexf('../resources/text.gexf', s, function() {
        s.refresh();
    });

我还尝试将 defaultEdgeArrow 属性添加到设置和渲染器 block - 它也不起作用。

请帮忙。感谢您的回答。

Answer 1

s = new sigma({
    renderer: {
        container: document.getElementById('content'),
        type: 'canvas'
    },
    settings : {
         maxEdgeSize: 5
    }
});
sigma.parsers.gexf('graph.gexf', s, function() {
    s.graph.edges().forEach(function(edge){ 
      edge.type = "arrow";
    });
    s.refresh();
});

看看http://plnkr.co/edit/Hrb0HmzT6TXdPxv3BFFq?p=preview

你的代码是一个 plunkr，适用于 sigma 1.0.3