ForceDirected

• Name: Force Directed

• Description: Force-directed relationship graph drawn with d3-force

• Playground Example

params$

• Type: DeepPartial<ForceDirectedParams>

• Fields:

  Name	Description	Type
  dot	Dot settings	Object
  dotLabel	Dot label settings	Object
  arrow	Arrow settings	Object
  arrowLabel	Arrow label settings	Object
  force	d3-force settings	Object
  zoomable	Zoom In/Out/Drag (mouse operation)	boolean
  transform	Transform settings	Object
  scaleExtent	Zoom In/Out min/max values	Object

• params.dot

  Name	Description	Type
  radius	Radius	number
  fillColorType	Background color type	ColorType
  strokeColorType	Border color type	ColorType
  strokeWidth	Border width	number
  styleFn	Node style function	(node: ComputedNode) => string

• params.dotLabel

  Name	Description	Type
  colorType	Color type	ColorType
  sizeFixed	Whether the size is fixed (not affected by Zoom In/Out)	boolean
  styleFn	Node label style function	(node: ComputedNode) => string

• params.arrow

  Name	Description	Type
  colorType	Radius	ColorType
  strokeWidth	Border width	number
  pointerWidth	Arrow width	number
  pointerHeight	Arrow height	number
  styleFn	Arrow style function	(node: ComputedEdge) => string

• params.arrowLabel

  Name	Description	Type
  colorType	Radius	ColorType
  sizeFixed	Whether the size is fixed (not affected by Zoom In/Out)	boolean
  styleFn	Edge label style function	(node: ComputedEdge) => string

• params.force

  Name	Description	Type
  nodeStrength	Node strength	number
  linkDistance	Link distance	number
  velocityDecay	Velocity decay	number
  alphaDecay	Alpha decay	number

• params.transform

  Name	Description	Type
  x	x offset	number
  y	y offset	number
  k	Scale factor	number

• params.scaleExtent

  Name	Description	Type
  min	Minimum zoom value, if 0 can zoom out infinitely	number
  max	Maximum zoom value, if Infinity can zoom in infinitely	number

Detailed Types

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

interface ComputedNode {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  categoryIndex: number
  categoryLabel: string
}

interface ComputedEdge {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  categoryIndex: number
  categoryLabel: string
  startNode: ComputedNode
  endNode: ComputedNode
}

• Default values:

{
  dot: {
    radius: 10,
    fillColorType: 'label',
    strokeColorType: 'label',
    strokeWidth: 1,
    styleFn: (node) => '',
  },
  dotLabel: {
    colorType: 'primary',
    sizeFixed: false,
    styleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
  },
  arrow: {
    colorType: 'primary',
    strokeWidth: 1.5,
    pointerWidth: 5,
    pointerHeight: 5,
    styleFn: (edge) => '',
  },
  arrowLabel: {
    colorType: 'primary',
    sizeFixed: false,
    styleFn: (edge) => ''
  },
  force: {
    nodeStrength: -500,
    linkDistance: 100,
    velocityDecay: 0.1,
    alphaDecay: 0.05
  },
  zoomable: true,
  transform: {
    x: 0,
    y: 0,
    k: 1
  },
  scaleExtent: {
    min: 0,
    max: Infinity
  }
}