Giters

cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis

Home Page:https://js.cytoscape.org

Repository from Github https://github.comcytoscape/cytoscape.jsRepository from Github https://github.comcytoscape/cytoscape.js

Ring charts

maxkfranz opened this issue · comments

commented

Description of new feature

What should the new feature do? For visual features, include an image/mockup of the expected output.

Similar to pie charts, there should be support for ring charts. Ring charts are like pie charts, except they use rings instead of pie-shaped slices:

Image

Updated pie chart documentation:

These properties allow you to create pie chart (or ring chart) backgrounds on nodes (demo). Note that 16 slices maximum are supported per node, so in the properties 1 <= i <= 16. Of course, you must specify a numerical value for each property in place of i. Each nonzero sized slice is placed in order of i, starting from the 12 o'clock position and working clockwise.

You may find it useful to reserve a number to a particular colour for all nodes in your stylesheet. Then you can specify values for pie-i-background-size accordingly for each node via a mapper. This would allow you to create consistently coloured pie charts in each node of the graph based on element data.

  • pie-size : The diameter of the pie, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px).
  • pie-hole : The diameter of the hole in the centre of the pie, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px). This effectively converts the pie chart into a ring chart (default disabled, 0).
  • pie-i-background-color : The colour of the node's ith pie chart slice.
  • pie-i-background-size : The size of the node's ith pie chart slice, measured in percent (e.g. 25%).
  • pie-i-background-opacity : The opacity of the node's ith pie chart slice.

Motivation for new feature

Describe your use case for this new feature.

  • Compatibility with Cytoscape Desktop & Web

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

  • Ensure that the reporter has adequately described their idea. If not, elicit more information about the use case. You should iteratively build a spec together.
  • Ensure that the issue is a good fit for the core library. Some things are best done in extensions (e.g. UI-related features that aren't style-related). Some things are best done by app authors themselves -- instead of in Cytoscape libraries.
  • The issue has been associated with a corresponding milestone.
  • The commits have been incorporated into the unstable branch via pull request. The corresponding pull request is cross-referenced.