References
Documentation
Home Getting started References
Different graphs Context menu Different sizes Interactivity Hover Interactivity Move Layouts Multi level Save graph Sdf Styles Tree Userdef layout
Layouts

References

Description

Creates new styled ccNetViz graph renderer attached to canvas element.

Parameters
element canvas element to which the graph will be attached
options styling parameters for the graph
Example options

{ styles: { background: { color: "rgb(0, 0, 0)" }, //background color of canvas, default: "rgb(255, 255, 255)" node: { //predefined style minSize: 8, //minimum size of node representation in pixels, default: 6 maxSize: 16, //maximum size of node representation in pixels, default: 16 color: "rgb(255, 0, 0)", //node color (combined with node image), default: "rgb(255, 255, 255)" texture: "images/circle.png", //node image label: { hideSize: 16, //minimum size (height) for the label to be displayed color: "rgb(120, 0, 0)", //label color, default: "rgb(120, 120, 120)" font: { //label font type: "Arial, Helvetica, sans-serif", size: 15 } } }, edge: { //predefined style width: 2, //edge width in pixels, default: 1 color: "rgb(86, 86, 86)", //edge color, default: "rgb(204, 204, 204)" arrow: { minSize: 6, //minimum size of arrow in pixels, default: 6 maxSize: 12, //maximum size of arrow, default: 12 aspect: 2, //aspect of arrow image, default: 1 texture: "images/arrow.png", //arrow image hideSize: 2 //minimum size of arrow to be displayed }, type: "line" //type of edge (supported types - "line", "dashed", "dotted", "chain-dotted") }, nodeBlue: { //custom style color: "rgb(0, 0, 255)" }, nodeGiant: { //custom style minSize: 16 }, nodeWithSmallBlueLabel: { //custom style label: { color: "rgb(0, 0, 255)", font: { //label font type: "Arial, Helvetica, sans-serif", size: 11 } } }, nodeWithSDFFont: { //custom style with rendering SDF fonts label: { color: "rgb(0, 0, 255)", font: { type: "sdf", texture: "fonts/OpenSans-Regular.png", //SDF (Signed distance field) texture metrics: "fonts/OpenSans-Regular.json", //SDF metrics size: 15, outlineColor: "rgb(0,255,255)" //color of outline - optional //( if it is not setted - background color would be used ) } } }, edgeWideYellow: { //custom style width: 4, color: "rgb(255, 255, 0)" }, edgeWithWhiteArrow: { //custom style arrow: { color: "rgb(255, 255, 255)" } } }, onChangeViewport: function(viewport){}, //called every time viewport changes onLoad: function(){}, //called when graph loaded getNodesCount(){}, //callback to use if you want to force nodes count into this library //(used to calculate curve excentricity and other built in options), //expecting number as return value getEdgesCount(){}, //callback to use if you want to force edges count into this library //(used to calculate curve excentricity and other built in options), //number as return value onDrag: function(viewport){}, //drag event, disable original event in case of return false onZoom: function(viewport){}, //zoom event, disable original event in case of return false onClick: function(){}, //called on click on graph onDblClick: function(){}, //called on double click on graph passiveEvts: false //make mouse events passive for performance reasons ( default false ) }

There are three predefined styles:
  • node: default style used for all nodes
  • edge: default style used for all edges
  • background: default style used for canvas background
All default property values of these styles can be overriden (as in example above).
Besides overriding default styles (used for all nodes / edges) it is possible to define custom styles (like "nodeBlue" etc. in example above) and then use this style just for specified subsets of nodes / edges (see bellow how to define style for given node / edge). Property values specified for given custom style override default style values.
When you want to use SDF (signed distance field) fonts, you can use one of our predefined style from our github io page or generate your own with node-fontnik.