Edge target arrows not working in Cytoscape.js >=2.7.0

Question

I noticed that edge source or target arrows are missing when using the current unstable branch (2.7.0-unstable). The standard cy demo show below. Is this a known issue or has something changed?

!(https://cloud.githubusercontent.com/assets/5722945/16018601/23d6d1a2-3173-11e6-9bbc-2b2d9c3bcd28.png) — mbeynon, Jun 15 '16 at 11:38

score 40 · Answer 1 · answered Jun 15 '16 at 19:04

40

The default stylesheet was updated in 2.7 to have greater performance by default. This means that haystack edges are used by default, and haystacks support only mid arrows.

If you set your edges in your stylesheet to beziers, then you can use source and target arrows, e.g.

edge {
  curve-style: bezier;
  target-arrow-shape: triangle;
}

answered Jun 15 '16 at 19:04

maxkfranz

11,896
1
27
36

It works. Thanks a lot. I am currently using Cytoscape.js >=2.7.0 for network virtualization. – Hua Zhang May 26 '17 at 00:43
How do you set your edges in your stylesheet to beziers? – ian Nov 06 '18 at 04:13
1

`style: { 'curve-style': 'bezier', /* ... */ }` – emil.c Apr 25 '19 at 20:30

score 1 · Answer 2 · edited Jun 15 '20 at 10:33

1

Use like this.

cy.edges('edge').style({
    "curve-style": "bezier",
    "target-arrow-shape": "triangle"
})

edited Jun 15 '20 at 10:33

Nithin Kumar Biliya

2,763
3
34
54

answered Jun 15 '20 at 04:56

Shizan Bhat

11
1

Edge target arrows not working in Cytoscape.js >=2.7.0

2 Answers2