ForceDirected

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

• 說明：以 d3-force 繪製的力導向關聯圖形

• Playground 範例

params$

• 型別：DeepPartial<ForceDirectedParams>

• 欄位：

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

• params.dot

  名稱	說明	型別
  radius	半徑	number
  fillColorType	底色顏色類別	ColorType
  strokeColorType	外框顏色類別	ColorType
  strokeWidth	外框寬度	number
  styleFn	Node 樣式函式	(node: ComputedNode) => string

• params.dotLabel

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

• params.arrow

  名稱	說明	型別
  colorType	半徑	ColorType
  strokeWidth	外框寬度	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
}

• 預設值：

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