svelvet

v11.0.0

svelvet

v11.0.0

Custom Edges

Svelvet also allows you to customize your edges. Currently, there are four edge types - straight, bezier, step, and smoothstep. The default will be a bezier edge unless you set type: 'straight', 'step', or 'smoothstep'. You can also turn on edge animations by setting animation: true.

Optionally customize the color of edges by setting edgeColor to a color name, hexcode, or rgb value. Annotate your edges by providing a label. Customize labels with labelBgColor and labelTextColor to change the background and text color of the label using color names, hexcodes, or rgb values.

Edge Properties

  • key
    value
  • id
    (required) string
  • source
    (required) node id
  • target
    (required) node id
  • type
    string ("straight", "bezier", "step", "smoothstep") - defaults to "bezier" if not specified
  • label
    string
  • labelBgColor
    string of string of color name, hexcode, or rgb
  • labelTextColor
    string of color name, hexcode, or rgb
  • edgeColor
    string of color name, hexcode, or rgb
  • animate
    boolean
  • arrow
    boolean
  • noHandle
    boolean

Implementing Custom Edges

Click here for a sandbox!