Bubbles

• Name: Bubble Chart

• Description: Suitable for presenting the names and quantities of individual data points

• Playground Example

params$

• Type: DeepPartial<BubblesParams>

• Fields:

  Name	Description	Type
  force	Settings for d3-force	Object
  bubbleLabel	Display settings for data label	Object
  arcScaleType	Mapping method for calculating 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'

• params.force

  Name	Description	Type
  strength	Bubble force	number
  velocityDecay	Velocity decay	number
  collisionSpacing	Bubble spacing	number

• params.bubbleLabel

  Name	Description	Type
  labelFn	Function to display label text	(d: ComputedDatumSeries) => string
  colorType	Label color type	ColorType
  fillRate	Fill rate of label text within the bubble (if 1, it fills completely without gaps)	number
  lineHeight	Line height of label text (if 1, it is equal to the text height)	number
  maxLineLength	Maximum number of characters per line of label text (if exceeded, it forces a line break)	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 line break if there are no space characters, and setting this to false will prevent line breaks)	boolean

Detailed Types

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

interface ComputedDatumSeries {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  seriesIndex: number
  seriesLabel: string
  seq: number
}

• Default values:

{
  force: {
    strength: 0.08,
    velocityDecay: 0.3,
    collisionSpacing: 2
  },
  bubbleLabel: {
    labelFn: d => String(d.label),
    colorType: 'labelContrast',
    fillRate: 0.6,
    lineHeight: 1,
    maxLineLength: 6,
    wordBreakAll: true,
  },
  arcScaleType: 'area'
}