Catalog Graph

# Option

You may also want to check out the Plugin Options (opens new window) in VuePress.

When two types are allowed, like Function | String or Function | Number. Use String or Number if you want all of the nodes/line to have the same value. Use a function if you want more flexibility.

WARNING

Options will be passed to the server as a raw String, there are some rules you need to follow

  1. Do not use double quotation marks " in your Options, all of them will be removed during parsing
  2. Always put your functions inside the Options object like the default Options below
Compelet Set of Default Options 
/**
 * Default options for configuration
 */

export default {
  node: {
    color: d => d.hasPage() ? '#3EAF7C': '#C28229',
    dblclick: (d, router) => router.push(d.regularPath),
    title: d => d.title,
    radius: 6,
    borderColor: '#fff',
    borderWidth: 1.6
  },
  line: {
    width: d => Math.sqrt(d.value),
    color: '#999',
    opacity: 0.6
  }
}

# node

All of the Functions under node section accept an argument: GraphNode.

# color

  • Type: Function | String

  • Arguments:

    • GraphNode

  • Usage

    Define the color for each node.

# dblclick

  • Type: Function

  • Arguments:

    • GraphNode
    • VueRouter

  • Usage

    Define your custimized behavior when double click a node.

# title

  • Type: Function | String

  • Arguments:

    • GraphNode

  • Usage

    Define the title for the svg element.

# radius

  • Type: Function | Number

  • Arguments:

    • GraphNode

  • Usage

    Define the node's radius.

# borderColor

  • Type: Function | String

  • Arguments:

    • GraphNode

  • Usage

    Define the node's border's color.

# borderWidth

  • Type: Function | Number

  • Arguments:

    • GraphNode

  • Usage

    Define the node's border's width.

# line

All of the Functions under line section accept an argument: { Obejct } Line.

# width

  • Type: Function | Number

  • Arguments:

    • Line

  • Usage

    Define the line's width.

# color

  • Type: Function | String

  • Arguments:

    • Line

  • Usage

    Define the line's color.

# opacity

  • Type: Function | Number

  • Arguments:

    • Line

  • Usage

    Define the line's opacity.

← Attribute →