ForceDirectedBubbles

• 名稱：ForceDirectedBubbles（力導向關聯泡泡圖）

• 說明：以 d3-force 繪製的力導向關聯圖形。以 Node 的 value 數量映射到泡泡的大小、以 Edge 的 value 數量映射到箭頭的粗細。

• Playground 範例

params$

• 型別：DeepPartial<ForceDirectedBubblesParams>

• 欄位：

  名稱	說明	型別
  bubble	泡泡設定	Object
  bubbleLabel	泡泡標籤設定	Object
  arrow	箭頭設定	Object
  arrowLabel	箭頭標籤設定	Object
  force	d3-force（力導向）設定	Object
  zoomable	能否 Zoom In/Out/Drag（滑鼠操作）	boolean
  transform	位移變形設定	Object
  scaleExtent	Zoom In/Out 最小/大值	Object

• params.bubble

  名稱	說明	型別
  radiusMin	映射 value 最小值的半徑	number
  radiusMax	映射 value 最大值的半徑	number
  arcScaleType	用 value 計算泡泡面積的映射方式。area 為資料映射到泡泡面積，radius 為資料映射到泡泡半徑（後者會造成面積差異更為明顯，但視覺的正確性可能會有爭議）	'area' | 'radius'
  fillColorType	底色顏色類別	ColorType
  strokeColorType	外框顏色類別	ColorType
  strokeWidth	外框寬度	number
  styleFn	Node 樣式函式	(node: ComputedNode) => string

• params.bubbleLabel

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

• params.arrow

  名稱	說明	型別
  colorType	顏色類別	ColorType
  strokeWidthMin	映射 value 最小值的外框寬度	number
  strokeWidthMax	映射 value 最大值的外框寬度	number
  pointerWidth	箭頭寬度	number
  pointerWidth	箭頭高度	number
  styleFn	箭頭樣式函式	(node: ComputedEdge) => string

• params.arrowLabel

  名稱	說明	型別
  colorType	半徑	ColorType
  sizeFixed	是否固定大小（不受到 Zoom In/Out 影響）	boolean
  styleFn	Edge 標籤樣式函式	(node: ComputedEdge) => string

• params.force

  名稱	說明	型別
  nodeStrength	泡泡引力	number
  linkDistance	連結長度	number
  velocityDecay	速度衰減數	number
  alphaDecay	α 衰減數	number

• params.transform

  名稱	說明	型別
  x	x 偏移	number
  y	y 偏移	number
  k	放大倍率	number

• params.scaleExtent

  名稱	說明	型別
  min	Zoom 最小值，如為 0 則可無限縮小	number
  max	Zoom 最大值，如為 Infinity 則可無限放大	number

詳細型別

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
}

• 預設值：

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