Skip to content

# cytoscape/cytoscape.js

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

# Taxi edges #2306

Closed
opened this issue Feb 26, 2019 · 0 comments

## Comments

Projects
None yet
1 participant
Member

### maxkfranz commented Feb 26, 2019 • edited

 Issue type Feature request Description of new feature For hierarchical, bundled edges (`curve-style: taxi`): A taxi edge (`curve-style: taxi`) is drawn as a series of right-angled lines (i.e. in taxicab geometry). The edge has a primary direction along either the x-axis or y-axis, which can be used to bundle edges in a hierarchy. That is, taxi edges are appropriate for trees and DAGs that are laid out in a hierarchical manner. A taxi edge has at most two visible turns: Starting from the source node, the edge goes in the primary direction for the specified distance. The edge then turns, going towards the target along the secondary axis. The first turn can be specified in order to bundle the edges of outgoing nodes. The second turn is implicit, based on the first turn, going the remaining distance along the main axis. When a taxi edge would be impossible to draw along the regular turning plan --- i.e. one or more turns is too close the source or target --- it is re-routed. The re-routing is carried out on a best-effort basis: Re-routing prioritises the specified direction for bundling over the specified turn distance. A `downward` edge, for example, will avoid going in the upward direction where possible. In practice, re-routing should not take place for graphs that are well laid out. `taxi-direction` : The main direction of the edge, the direction starting out from the source node; may be one of: `auto` : Automatically use `vertical` or `horizontal`, based on whether the vertical or horizontal distance is largest. `vertical` : Automatically use `downward` or `upward`, based on the vertical direction from source to target. `downward` : Bundle outgoers downwards. `upward` : Bundle outgoers upwards. `horizontal` : Automatically use `righward` or `leftward`, based on the horizontal direction from source to target. `rightward` : Bundle outgoers righwards. `leftward` : Bundle outgoers leftwards. `taxi-turn` : The distance along the primary axis where the first turn is applied. This value may be an absolute distance (e.g. `20px`) or it may be a relative distance between the source and target (e.g. `50%`). Note that bundling may not work with an explicit direction (`upward`, `downward`, `leftward`, or `rightward`) in tandem with a turn distance specified in percent units. `taxi-turn-min-distance` : The minimum distance along the primary axis that is maintained between the nodes and the turns. This value only takes on absolute values (e.g. `5px`). This property makes the taxi edge be re-routed when the turns would be otherwise too close to the source or target. As such, it also helps to avoid turns overlapping edge endpoint arrows. `edge-distances` : With value `intersection` (default), the distances (`taxi-turn` and `taxi-turn-min-distance`) are considered from the outside of the source's bounds to the outside of the target's bounds. With value `node-position`, the distances are considered from the source position to the target position. The `node-position` option makes calculating edge points easier --- but it should be used carefully because you can create invalid points that `intersection` would have automatically corrected. Motivation for new feature It would be nice to create graphs that have right-angled edges that work well with hierarchies. That is, the specification for the edge properties should be simple so that when a hierarchical layout is applied, the edges are automatically routed in a sensible manner, e.g.:

Closed

### maxkfranz added a commit that referenced this issue Feb 26, 2019

``` Taxi edges ```
```- Add taxi edge implementation.
- Add docs.
- Add example of taxi edges to the edge types demo in the docs.

Ref #2306```
``` fac2872 ```

Open

### maxkfranz added a commit that referenced this issue Feb 26, 2019

``` Add taxi edge example to the debug page ```
`Ref #2306`
``` ba7955d ```

### maxkfranz added a commit that referenced this issue Mar 1, 2019

``` Improvements to taxi docs ```
`Ref #2306`
``` 78951be ```

### maxkfranz added a commit that referenced this issue Mar 1, 2019

``` Improve taxi edge when it has an explicit direction (e.g. downward) a… ```
```…nd a turn value in percent units

Ref #2306```
``` d942446 ```

### xhlulu referenced this issue Mar 29, 2019

Closed

#### Support for ` "curve-style": "taxi"` for edges #44

to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.