Styleobject

Style object

Description

The style object is used to describe the visual style used by the renderer. You use this object to provide rules for the style of your graph.

The format of the object varies from renderer to renderer. The format of the SVG renderer's style object is described below.

SVG renderer style object format

The basic structure of the style object for the SVG renderer is as follows.

var styleObj = {
  global: { /* ... */ }
  selectors: {
    "node": {
      fillColor: "#888"
      // and so on
    },
    "node:selected": {
       borderColor: "blue"
       // and so on
    },
    // you'd probably have more selectors defined
  }
};

The contents of selectors is a lot like CSS. Each element is assigned its style from each matching selector style, in order.

Types of properties

The properties in the sections that follow are annotated with their associated types. Those types are described below.

string : An arbitrary string

number : A non-negative number

percent : A number between 0 and 1 inclusive

color : A valid CSS colour in a string (e.g. "red", "rgba(255, 0, 0, 0.5)", "#f00", "#ff0000", et cetera)

stroke : A stroke style string (one of "solid", "dot", "longdash", or "dash")

nodeshape : A node shape string (one of "ellipse", "rectangle", "roundrectangle", or "triangle")

arrowshape : An arrow shape string (one of "none", "triangle", "circle", "square", "tee", or "diamond")

cursor : A valid CSS cursor string (e.g. "grabbing", "pointer", "default", et cetera)

visibility : A valid CSS visibility string (e.g. "visible" or "hidden")

valign : A vertical alignment string (one of "top", "bottom", or "middle"

halign : A horizontal alignment string (one of "left", "right", or "middle")

fontsize : A valid CSS font size string or plain number (e.g. 12, "14pt", "inherit", et cetera)

fontstyle : A valid CSS font style string

fontdecoration : A valid CSS font decoration string

fontvariant : A valid CSS font variant string

fontfamily : A valid CSS font family string

fontweight : A valid CSS font weight string

Mappers

In place of a value, a mapper may be used. A mapper allows for programatic property values within a selector in the style object.

var styleObj = {

  ...

  selectors: {
    "node": {
      
      // example continuous mapper
      width: {
        defaultValue: 20,
        continuousMapper: {
          attr: {
            name: "weight", // the field in ele.data() to map to
            min: 0.2, // values below this are mapped to mapped.min; calculated automatically on undefined
            max: 0.8 // values above this are mapped to mapped.max; calculated automatically on undefined
          },
          mapped: {
            min: 10, // the min value of the visual property to map to
            max: 30 // the max value of the visual property to map to
          }
        }
      },
      
      // example passthrough mapper that maps ele.data("label") to labelText
      labelText: {
        defaultValue: "",
        passthroughMapper: "label" // field in ele.data() to map to
      },

      // example discrete mapper
      fillColor: {
        defaultValue: "grey",
        discreteMapper: {
          attr: "type", // field in ele.data() to map to
          mapped: {
            "foo": "red", // field value : visual property value
            "bar": "blue"
          }
        }
      }
    },

    ...

  }
};

global

Contains global visual styles, such as the selection colour. The list of properties available to set is as follows:

• panCursor : cursor : The cursor used when panning
• selectionFillColor : colour : The fill colour of the selection rectangle
• selectionOpacity : percent : The fill opacity of the selection rectangle
• selectionBorderColor : colour : The border colour of the selection rectangle
• selectionBorderWidth : number : The thickness of the border of the selection rectangle

selectors

Contains a map of selectors. Each selector maps to an object describing the visual style corresponding to that selector. The list of available properties is as follows:

Nodes:

• fillColor : color : The fill colour of a node
• fillOpacity : percent : The fill opacity of a node
• borderColor : color : The colour of node borders
• borderOpacity : percent : The opacity of node borders
• borderWidth : number : The thickness of node borders (a border is positioned on the centre of a node's outer shape edge)
• borderStyle : stroke : The stroke style of node borders
• height : number : The height of a node
• width : number : The width of a node
• shape : nodeshape : The shape of a node

Edges:

• width : number : The width of a edge's line
• style : stroke : The stroke style for an edge's line
• lineColor : color : The colour of an edge's line
• targetArrowColor : color : The colour of an edge's target arrow
• targetArrowShape : arrowshape : The shape of an edge's target arrow
• sourceArrowColor : color : The colour of an edge's source arrow
• sourceArrowShape : arrowshape : The shape of an edge's source arrow

Both nodes & edges:

• cursor : cursor : The cursor shown when put on top of the element
• visibility : visibility : Whether the element is visible or hidden
• labelValign : valign : The vertical alignment of an element's label
• labelHalign : halign : The horizontal alignment of an element's label
• labelText : string : The text to show for an element's label
• labelFillColor : color : The fill colour of a label
• labelOutlineColor : color : The colour of a label's outline
• labelOutlineWidth : number : The thickness of a label's outline (starts outside the boundary of the text)
• labelFontSize : fontsize : The font size of labels
• labelFontStyle : fontstyle : The font style of labels
• labelFontDecoration : fontdecoration : The font decoration of labels
• labelFontVariant : fontvariant : The font variant of labels
• labelFontFamily : fontfamily : The font family of labels (i.e the font name)
• labelFontWeight : fontweight : The font weight of labels
• labelOpacity : percent : The overall opacity of labels
• labelOutlineOpacity : percent : The opacity of the outline of labels