Why does my cytoscape graph lack arrow heads (though I put them in)?

Question

The following cytoscape.js graph shows no arrow heads on its edges. I do have a selector for edges that specifies a triangular arrowhead, but it does not show up.

var cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
    selector: 'node',
    style: {
      'background-color': 'mapData(activation, -1, 1, blue, red)',
      'label': 'data(id)'
    }
  }, {
    selector: 'edge',
    style: {
      'width': 3,
      'line-color': function(ele) {
        return ele.data('relation')
      },
      'target-arrow-color': function(ele) {
        return ele.data('relation')
      },
      'target-arrow-shape': 'triangle'
    }
  }],
  // If you want to apply the layout on the constructor
  // you must supply the elements too
  layout: {
    name: 'breadthfirst'
  },
  elements: {
    nodes: [{
        group: 'nodes',
        data: {
          id: 'E1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E4',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E5',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E6',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E7',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E8',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH4',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH4',
          activation: 0
        }
      }
    ],
    edges: [{
        group: 'edges',
        data: {
          id: 'edge0',
          source: 'E4',
          target: 'E5',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge1',
          source: 'E6',
          target: 'E7',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge2',
          source: 'LH1',
          target: 'E1',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge3',
          source: 'LH1',
          target: 'RH1',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge4',
          source: 'LH2',
          target: 'E4',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge5',
          source: 'LH3',
          target: 'E4',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge6',
          source: 'LH4',
          target: 'E6',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge7',
          source: 'RH1',
          target: 'E2',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge8',
          source: 'RH1',
          target: 'E3',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge9',
          source: 'RH2',
          target: 'E5',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge10',
          source: 'RH3',
          target: 'E7',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge11',
          source: 'RH4',
          target: 'E8',
          relation: 'red'
        }
      }
    ]
  }
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

Note that for selector 'edge', I specify a triangular head.

Clino

I solved my own problem here - I added a curve-style : of 'bezier', and the arrowheads did appear. – Clino

Can you answer your own question? This way the question is closed and in the future people can research their problems better :D Thanks – Balduin

Answer 1

Here is an example Style that gives arrow

      selector: 'edge',
      style: {
       'target-arrow-shape': 'triangle',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'line-color': '#333',
        'width': 1.5,
        'curve-style': 'bezier'
      }
    }

The most important styles are target-arrow-shape and curve-style. curve-style value can also be straight to get similar result (but not exactly the same result in certain cases)

Phellem