Bubbles

• 名稱：Bubble Chart（泡泡圖）

• 說明：適用於呈現所有各別資料名稱及數量的圖形

• Playground 範例

params$

• 型別：DeepPartial<BubblesParams>

• 欄位：

  名稱	說明	型別
  force	d3-force 的設定	Object
  bubbleLabel	資料 label 的顯示設定	Object
  arcScaleType	用 value 計算泡泡面積的映射方式。area 為資料映射到泡泡面積，radius 為資料映射到泡泡半徑（後者會造成面積差異更為明顯，但視覺的正確性可能會有爭議）	'area' | 'radius'

• params.force

  名稱	說明	型別
  strength	泡泡引力	number
  velocityDecay	速度衰減數	number
  collisionSpacing	泡泡間距	number

• params.bubbleLabel

  名稱	說明	型別
  labelFn	標籤顯示文字的函式	(d: ComputedDatumSeries) => string
  colorType	標籤顏色類別	ColorType
  fillRate	標籤文字填充泡泡的比率（如為 1 則完全填滿無間隙）	number
  lineHeight	標籤文字行高（如為 1 則和文字高度相等）	number
  maxLineLength	標籤文字單行最長字數（超過則強制換行）	number
  wordBreakAll	換行方式是否即使無空隔字元也強制換行（如標籤內容使用英文以外的字元 - 比如中文，有可能會因為所有字元中沒有空隔，而當設定為 false 時會因此無法換行）	boolean

詳細型別

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
}

• 預設值：

{
  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'
}