ForceDirectedBubbles

• Name: Force Directed Bubbles

• Description: Force-directed relationship graph drawn with d3-force. The value of the Node is mapped to the size of the bubble, and the value of the Edge is mapped to the thickness of the arrow.

• Playground Example

params$

• Type: DeepPartial<ForceDirectedBubblesParams>

• Fields:

  Name	Description	Type
  bubble	Bubble settings	Object
  bubbleLabel	Bubble 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.bubble

  Name	Description	Type
  radiusMin	Radius for the minimum value	number
  radiusMax	Radius for the maximum value	number
  arcScaleType	Mapping method for bubble area using value. area maps data to bubble area, radius maps data to bubble radius (the latter will cause more significant area differences, but the visual accuracy may be controversial)	'area' | 'radius'
  fillColorType	Background color type	ColorType
  strokeColorType	Border color type	ColorType
  strokeWidth	Border width	number
  styleFn	Node style function	(node: ComputedNode) => string

• params.bubbleLabel

  Name	Description	Type
  fillRate	Ratio of label text filling the bubble (if 1, it fills completely without gaps)	number
  lineHeight	Line height of label text (if 1, it equals the text height)	number
  maxLineLength	Maximum number of characters per line for label text (forces line break if exceeded)	number
  wordBreakAll	Whether to force line breaks even without space characters (if the label content uses non-English characters - such as Chinese, it may not be able to break lines if set to false due to the lack of space characters)	boolean
  colorType	Radius	ColorType
  styleFn	Node label style function	(node: ComputedNode) => string

• params.arrow

  Name	Description	Type
  colorType	Color type	ColorType
  strokeWidthMin	Border width for the minimum value	number
  strokeWidthMax	Border width for the maximum value	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	Bubble attraction	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	Zoom scale	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:

{
  bubble: {
    radiusMin: 15,
    radiusMax: 45,
    arcScaleType: 'area',
    fillColorType: 'label',
    strokeColorType: 'label',
    strokeWidth: 1,
    styleFn: (node) => '',
  },
  bubbleLabel: {
    fillRate: 0.9,
    lineHeight: 1,
    maxLineLength: 6,
    wordBreakAll: true,
    colorType: 'labelContrast',
    styleFn: (node) => ''
  },
  arrow: {
    colorType: 'primary',
    strokeWidthMin: 1.5,
    strokeWidthMax: 4.5,
    pointerWidth: 5,
    pointerHeight: 5,
    styleFn: (node) => '',
  },
  arrowLabel: {
    colorType: 'primary',
    sizeFixed: false,
    styleFn: (node) => ''
  },
  force: {
    nodeStrength: -500,
    linkDistance: 130,
    velocityDecay: 0.1,
    alphaDecay: 0.05
  },
  zoomable: true,
  transform: {
    x: 0,
    y: 0,
    k: 1
  },
  scaleExtent: {
    min: 0,
    max: Infinity
  }
}