@orbcharts/plugins-basic 3.0.5 → 3.0.7

package/src/relationship/plugins/ForceDirectedBubbles.ts

@@ -1,1295 +1,1295 @@
-import * as d3 from 'd3'
-import {
-  of,
-  combineLatest,
-  map,
-  switchMap,
-  first,
-  takeUntil,
-  Subject, 
-  BehaviorSubject,
-  Observable,
-  distinctUntilChanged,
-  shareReplay,
-  take,
-  share,
-  filter,
-  iif,
-  EMPTY
-} from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import type {
-  ChartParams,
-  DatumValue,
-  DataSeries,
-  EventName,
-  EventRelationship,
-  ComputedDataSeries,
-  ComputedNode,
-  ComputedEdge,
-  ContainerPosition,
-  Layout
-} from '../../../lib/core-types'
-import {
-  defineRelationshipPlugin,
-  getMinMax
-} from '../../../lib/core'
-import type { BubblesParams, ArcScaleType, ForceDirectedBubblesParams } from '../../../lib/plugins-basic-types'
-import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS } from '../defaults'
-// import { renderCircleText } from '../../utils/d3Graphics'
-import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-import { renderCircleText } from '../../utils/d3Graphics'
-
-// interface BubblesDatum extends ComputedNode {
-//   x: number
-//   y: number
-//   r: number
-//   _originR: number // 紀錄變化前的r
-// }
-
-type Zoom = {
-  xOffset: number
-  yOffset: number
-  scaleExtent: {
-    min: number
-    max: number
-  }
-}
-
-// d3 forceSimulation使用的node資料
-type RenderNode = d3.SimulationNodeDatum & ComputedNode & {
-  r: number
-}
-
-// d3 forceSimulation使用的edge資料
-interface RenderEdge extends ComputedEdge {
-  source: RenderNode
-  target: RenderNode
-  strokeWidth: number
-  markerId: string
-}
-
-// d3 forceSimulation使用的資料
-type RenderData = {
-  nodes: (ComputedNode | RenderNode)[] // 經過d3 forceSimulation計算後的node才有座標資訊
-  edges: RenderEdge[]
-}
-
-interface D3DragEvent {
-  active: number
-  dx: number
-  dy: number
-  identifier: string
-  sourceEvent: MouseEvent
-  subject: RenderNode
-  target: any
-  type: string
-  x: number
-  y: number
-}
-
-type DragStatus = 'start' | 'drag' | 'end'
-
-interface MarkerParams {
-  viewBox: string
-  d: string
-  pointerWidth: number
-  pointerHeight: number
-  // refX: number
-}
-
-interface MarkerDatum {
-  id: string
-  edgeId: string
-  strokeWidth: number
-  refX: number
-}
-
-// type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
-
-const pluginName = 'ForceDirectedBubbles'
-
-const baseLineHeight = 12 // 未變形前的字體大小（代入計算用而已，數字多少都不會有影響）
-
-const gSelectionClassName = getClassName(pluginName, 'zoom-area')
-const defsArrowMarkerId = getUniID(pluginName, 'arrow')
-const defsArrowMarkerClassName = getClassName(pluginName, 'arrow-marker')
-const edgeListGClassName = getClassName(pluginName, 'edge-list-g')
-const edgeGClassName = getClassName(pluginName, 'edge-g')
-const edgeArrowPathClassName = getClassName(pluginName, 'edge-arrow-path')
-const edgeLabelGClassName = getClassName(pluginName, 'edge-label-g')
-const edgeLabelClassName = getClassName(pluginName, 'edge-label')
-const nodeListGClassName = getClassName(pluginName, 'node-list-g')
-const nodeGClassName = getClassName(pluginName, 'node-g')
-const nodeCircleClassName = getClassName(pluginName, 'node-circle')
-// const nodeLabelGClassName = getClassName(pluginName, 'node-label-g')
-// const nodeLabelClassName = getClassName(pluginName, 'node-label')
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS,
-  layerIndex: LAYER_INDEX_OF_GRAPHIC,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      bubble: {
-        toBeTypes: ['object']
-      },
-      bubbleLabel: {
-        toBeTypes: ['object']
-      },
-      arrow: {
-        toBeTypes: ['object']
-      },
-      arrowLabel: {
-        toBeTypes: ['object']
-      },
-      force: {
-        toBeTypes: ['object']
-      },
-      zoomable: {
-        toBeTypes: ['boolean']
-      },
-      transform: {
-        toBeTypes: ['object']
-      },
-      scaleExtent: {
-        toBeTypes: ['object']
-      }
-    })
-    if (params.bubble) {
-      const bubbleResult = validateColumns(params.bubble, {
-        radiusMin: {
-          toBeTypes: ['number']
-        },
-        radiusMax: {
-          toBeTypes: ['number']
-        },
-        arcScaleType: {
-          toBe: '"area" | "radius"',
-          test: (value) => value === 'area' || value === 'radius'
-        },
-        fillColorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeColorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeWidth: {
-          toBeTypes: ['number']
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (bubbleResult.status === 'error') {
-        return bubbleResult
-      }
-    }
-    if (params.bubbleLabel) {
-      const bubbleLabelResult = validateColumns(params.bubbleLabel, {
-        fillRate: {
-          toBeTypes: ['number']
-        },
-        lineHeight: {
-          toBeTypes: ['number']
-        },
-        maxLineLength: {
-          toBeTypes: ['number']
-        },
-        colorType: {
-          toBeOption: 'ColorType'
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (bubbleLabelResult.status === 'error') {
-        return bubbleLabelResult
-      }
-    }
-    if (params.arrow) {
-      const arrowResult = validateColumns(params.arrow, {
-        colorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeWidthMin: {
-          toBeTypes: ['number']
-        },
-        strokeWidthMax: {
-          toBeTypes: ['number']
-        },
-        pointerWidth: {
-          toBeTypes: ['number']
-        },
-        pointerHeight: {
-          toBeTypes: ['number']
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (arrowResult.status === 'error') {
-        return arrowResult
-      }
-    }
-    if (params.arrowLabel) {
-      const arrowLabelResult = validateColumns(params.arrowLabel, {
-        colorType: {
-          toBeOption: 'ColorType'
-        },
-        sizeFixed: {
-          toBeTypes: ['boolean']
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (arrowLabelResult.status === 'error') {
-        return arrowLabelResult
-      }
-    }
-    if (params.force) {
-      const forceResult = validateColumns(params.force, {
-        nodeStrength: {
-          toBeTypes: ['number']
-        },
-        linkDistance: {
-          toBeTypes: ['number']
-        },
-        velocityDecay: {
-          toBeTypes: ['number']
-        },
-        alphaDecay: {
-          toBeTypes: ['number']
-        },
-      })
-      if (forceResult.status === 'error') {
-        return forceResult
-      }
-    }
-    if (params.transform) {
-      const transformResult = validateColumns(params.transform, {
-        x: {
-          toBeTypes: ['number']
-        },
-        y: {
-          toBeTypes: ['number']
-        },
-        k: {
-          toBeTypes: ['number']
-        },
-      })
-      if (transformResult.status === 'error') {
-        return transformResult
-      }
-    }
-    if (params.scaleExtent) {
-      const scaleExtentResult = validateColumns(params.scaleExtent, {
-        min: {
-          toBeTypes: ['number']
-        },
-        max: {
-          toBeTypes: ['number']
-        },
-      })
-      if (scaleExtentResult.status === 'error') {
-        return scaleExtentResult
-      }
-    }
-    return result
-  }
-}
-
-// let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
-
-function createSimulation (layout: Layout, fullParams: ForceDirectedBubblesParams) {
-  return d3.forceSimulation()
-    .velocityDecay(fullParams.force.velocityDecay)
-    .alphaDecay(fullParams.force.alphaDecay)
-    .force(
-      "link",
-      d3.forceLink()
-        .id((d: d3.SimulationNodeDatum & ComputedNode) => d.id)
-        .strength(1)
-        .distance((d: d3.SimulationLinkDatum<d3.SimulationNodeDatum & ComputedNode>) => {
-          // if (d.direction === 'top') {
-          //   return 200
-          // } else {
-          //   return 250
-          // }
-          return fullParams.force.linkDistance
-        })
-    )
-    .force("charge", d3.forceManyBody().strength(fullParams.force.nodeStrength))
-    .force("collision", d3.forceCollide(fullParams.bubble.radiusMax).strength(1)) // 先以最大值設定
-    .force("center", d3.forceCenter(layout.width / 2, layout.height / 2))
-
-}
-
-function translateFn (d: any): string {
-  // console.log('translateFn', d)
-  return "translate(" + d.x + "," + d.y + ")";
-}
-
-function translateCenterFn (d: any): string {
-  // console.log('translateCenterFn', d)
-  const x = d.source.x + ((d.target.x - d.source.x) / 2) // 置中的話除2
-  const y = d.source.y + ((d.target.y - d.source.y) / 2) // 置中的話除2
-  return "translate(" + x + "," + y + ")";
-}
-
-function linkArcFn (d: RenderEdge): string {
-  // console.log('linkArcFn', d)
-  
-  // const dx = d.target.x - d.source.x,
-  //     dy = d.target.y - d.source.y
-  // dr讓方向線變成有弧度的
-  //     dr = Math.sqrt(dx * dx + dy * dy);
-  // return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
-  
-  // 直線
-  return "M" + d.source.x + "," + d.source.y + " L" + d.target.x + "," + d.target.y;
-
-
-}
-
-
-
-function renderArrowMarker ({ defsSelection, markerParams, markerData, fullParams, fullChartParams }: {
-  defsSelection: d3.Selection<SVGDefsElement, any, any, unknown>
-  markerParams: MarkerParams
-  markerData: MarkerDatum[]
-  fullParams: ForceDirectedBubblesParams
-  fullChartParams: ChartParams
-}) {
-  return defsSelection
-    .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
-    .data(markerData)
-    .join(
-      enter => {
-        const enterSelection = enter
-          .append("marker")
-          .classed(defsArrowMarkerClassName, true)
-          .attr("viewBox", markerParams.viewBox)
-          .attr("orient", "auto")
-        enterSelection.append("path")
-          .attr("d", markerParams.d)
-        return enterSelection
-      },
-      update => {
-        return update
-      },
-      exit => {
-        return exit.remove()
-      }
-    )
-    .attr('id', d => d.id)
-    .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
-    .attr("markerWidth", markerParams.pointerWidth)
-    .attr("markerHeight", markerParams.pointerHeight)
-    .attr('refX', d => d.refX)
-    .attr("refY", 0)
-    
-
-}
-
-// function drag (): d3.DragBehavior<Element, unknown, unknown> {
-//   let originHighlightLockMode: boolean // 拖拽前的highlightLockMode
-
-//   return d3.drag()
-//     .on("start", (event: D3DragEvent) => {
-//       console.log('start', event.sourceEvent)
-//       // if (this.params.lockMode) {
-//       //   return
-//       // }
-//       // if (!d3.event.active) {
-//       //   this.forceRestart()
-//       // }
-//       // d.fx = d.x
-//       // d.fy = d.y
-
-//       // // 鎖定模式才不會在拖拽過程式觸發到其他事件造成衝突
-//       // originHighlightLockMode = this.highlightLockMode
-//       // this.highlightLockMode = true
-//       // this.noneStopMode = true
-//       // // 動畫會有點卡住所以乾脆拿掉
-//       // if(this.tooltip != null) {
-//       //   this.tooltip.remove()
-//       // }
-//     })
-//     .on("drag", function (event: D3DragEvent) {
-//       console.log('drag', event)
-//       // if (this.params.lockMode) {
-//       //   return
-//       // }
-//       // if (!d3.event.active) {
-//       //   this.force.alphaTarget(0)
-//       // }
-//       // d.fx = d3.event.x
-//       // d.fy = d3.event.y
-//       // d3.select(this).attr({
-//       //   'cx': event.x,
-//       //   'cy': event.y,
-//       // })
-//       d3.select(this)
-//         .attr('fx', event.x)
-//         .attr('fy', event.y)
-//     })
-//     .on("end", (event: D3DragEvent) => {
-//       console.log('end', event)
-//       // if (this.params.lockMode) {
-//       //   return
-//       // }
-//       // d.fx = null
-//       // d.fy = null
-
-//       // this.highlightLockMode = originHighlightLockMode // 還原拖拽前的highlightLockMode
-//       // this.noneStopMode = false
-//       // if (this.highlightLockMode) {
-//       //   this.forceStop()
-//       // }
-//     })
-// }
-
-function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dragStatus$: BehaviorSubject<DragStatus>) {    
-  function dragstarted (event: D3DragEvent, node: RenderNode) {
-    if (!event.active) {
-      simulation.alphaTarget(0.3).restart()
-    }
-    event.subject.fx = event.subject.x
-    event.subject.fy = event.subject.y
-    
-    dragStatus$.next('start')
-  }
-  
-  function dragged (event: D3DragEvent, node: RenderNode) {
-    event.subject.fx = event.x
-    event.subject.fy = event.y
-
-    dragStatus$.next('drag')
-  }
-  
-  function dragended (event: D3DragEvent, node: RenderNode) {
-    if (!event.active) {
-      simulation.alphaTarget(0)
-    }
-    event.subject.fx = null
-    event.subject.fy = null
-
-    dragStatus$.next('end')
-  }
-  
-  return d3.drag()
-    .on("start", dragstarted)
-    .on("drag", dragged)
-    .on("end", dragended)
-}
-
-function renderNodeG ({ nodeListGSelection, nodes }: {
-  nodeListGSelection: d3.Selection<SVGGElement, any, any, unknown>
-  nodes: RenderNode[]
-}) {
-  return nodeListGSelection.selectAll<SVGGElement, RenderNode>('g')
-    .data(nodes, d => d.id)
-    .join(
-      enter => {
-        const enterSelection = enter
-          .append('g')
-          .classed(nodeGClassName, true)
-          // .attr('cursor', 'pointer')
-        return enterSelection
-      },
-      update => {
-        return update
-      },
-      exit => {
-        return exit.remove()
-      }
-    )
-}
-
-function renderNodeCircle ({ nodeGSelection, fullParams, fullChartParams }: {
-  nodeGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
-  fullParams: ForceDirectedBubblesParams
-  fullChartParams: ChartParams
-}) {
-  nodeGSelection
-    .each((data,i,g) => {
-      const gSelection = d3.select(g[i])
-      gSelection.selectAll<SVGCircleElement, ComputedEdge>('circle')
-        .data([data])
-        .join(
-          enter => {
-            const enterSelection = enter
-              .append('circle')
-              .classed(nodeCircleClassName, true)
-              .attr('cursor', 'pointer')
-            return enterSelection
-          },
-          update => {
-            return update
-          },
-          exit => {
-            return exit.remove()
-          }
-        )
-        .attr('r', d => d.r)
-        .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.bubble.fillColorType, fullChartParams }))
-        .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.bubble.strokeColorType, fullChartParams }))
-        .attr('stroke-width', fullParams.bubble.strokeWidth)
-        .attr('style', d => fullParams.bubble.styleFn(d))
-        
-    })
-    .attr("text-anchor", "middle")
-    .attr('font-size', baseLineHeight)
-    .each((d,i,g) => {
-      const gSelection = d3.select(g[i])
-      
-      gSelection.call(renderCircleText, {
-        text: d.label,
-        radius: d.r * fullParams.bubbleLabel.fillRate,
-        lineHeight: baseLineHeight * fullParams.bubbleLabel.lineHeight,
-        isBreakAll: d.label.length <= fullParams.bubbleLabel.maxLineLength
-          ? false
-          : fullParams.bubbleLabel.wordBreakAll
-      })
-
-      // -- text color --
-      gSelection.select('text').attr('fill', _ => getDatumColor({
-        datum: d,
-        colorType: fullParams.bubbleLabel.colorType,
-        fullChartParams: fullChartParams
-      }))
-
-
-    })
-
-  nodeGSelection.select('text')
-    .attr('pointer-events', 'none')
-    .attr('style', d => fullParams.bubbleLabel.styleFn(d))
-
-  return nodeGSelection.select<SVGCircleElement>(`circle.${nodeCircleClassName}`)
-}
-
-// function renderNodeLabelG ({ nodeGSelection }: {
-//   nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
-// }) {
-//   nodeGSelection.each((data,i,g) => {
-//     const gSelection = d3.select(g[i])
-//     gSelection.selectAll<SVGGElement, RenderNode>('g')
-//       .data([data])
-//       .join(
-//         enter => {
-//           const enterSelection = enter
-//             .append('g')
-//             .classed(nodeLabelGClassName, true)
-//             // .attr('cursor', 'pointer')
-//           return enterSelection
-//         },
-//         update => {
-//           return update
-//         },
-//         exit => {
-//           return exit.remove()
-//         }
-//       )
-//   })
-
-//   return nodeGSelection.select<SVGTextElement>(`g.${nodeLabelGClassName}`)
-// }
-
-// function renderNodeLabel ({ nodeLabelGSelection, fullParams, fullChartParams }: {
-//   nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
-//   fullParams: ForceDirectedBubblesParams
-//   fullChartParams: ChartParams
-// }) {
-//   nodeLabelGSelection.each((data,i,g) => {
-//     const gSelection = d3.select(g[i])
-//     gSelection.selectAll<SVGTextElement, RenderNode>('text')
-//       .data([data], d => d.id)
-//       .join(
-//         enter => {
-//           const enterSelection = enter
-//             .append('text')
-//             .classed(nodeLabelClassName, true)
-//             // .attr('cursor', 'pointer')
-//             .attr('text-anchor', 'middle')
-//             .attr('pointer-events', 'none')
-//           return enterSelection
-//         },
-//         update => {
-//           return update
-//         },
-//         exit => {
-//           return exit.remove()
-//         }
-//       )
-//       .text(d => d.label)
-//       .attr('transform', d => `translate(0, ${- d.r - 10})`)
-//       .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.node.labelColorType, fullChartParams }))
-//       .attr('font-size', fullChartParams.styles.textSize)
-//       .attr('style', d => fullParams.node.labelStyleFn(d))
-//   })
-
-//   return nodeLabelGSelection.select<SVGTextElement>(`text.${nodeLabelClassName}`)
-// }
-
-function renderEdgeG ({ edgeListGSelection, edges }: {
-  edgeListGSelection: d3.Selection<SVGGElement, any, any, unknown>
-  edges: RenderEdge[]
-}) {
-  return edgeListGSelection.selectAll<SVGGElement, RenderEdge>('g')
-    .data(edges, d => d.id)
-    .join(
-      enter => {
-        const enterSelection = enter
-          .append('g')
-          .classed(edgeGClassName, true)
-          // .attr('cursor', 'pointer')
-        return enterSelection
-      },
-      update => {
-        return update
-      },
-      exit => {
-        return exit.remove()
-      }
-    )
-}
-
-function renderEdgeArrowPath ({ edgeGSelection, fullParams, fullChartParams }: {
-  edgeGSelection: d3.Selection<SVGGElement, RenderEdge, any, unknown>
-  fullParams: ForceDirectedBubblesParams
-  fullChartParams: ChartParams
-}) {
-  edgeGSelection.each((data,i,g) => {
-    const gSelection = d3.select(g[i])
-    gSelection.selectAll<SVGPathElement, ComputedEdge>('path')
-      .data([data])
-      .join(
-        enter => {
-          return enter
-            .append('path')
-            .classed(edgeArrowPathClassName, true)
-        },
-        update => {
-          return update
-        },
-        exit => {
-          return exit.remove()
-        }
-      )
-      .attr('marker-end', d => `url(#${d.markerId})`)
-      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.arrow.colorType, fullChartParams }))
-      .attr('stroke-width', d => d.strokeWidth)
-      .attr('style', d => fullParams.arrow.styleFn(d))
-  })
-
-  return edgeGSelection.select<SVGPathElement>(`path.${edgeArrowPathClassName}`)
-}
-
-function renderEdgeLabelG ({ edgeGSelection }: {
-  edgeGSelection: d3.Selection<SVGGElement, any, any, unknown>
-}) {
-  edgeGSelection.each((data,i,g) => {
-    const gSelection = d3.select(g[i])
-    gSelection.selectAll<SVGGElement, RenderEdge>('g')
-      .data([data])
-      .join(
-        enter => {
-          const enterSelection = enter
-            .append('g')
-            .classed(edgeLabelGClassName, true)
-            // .attr('cursor', 'pointer')
-          return enterSelection
-        },
-        update => {
-          return update
-        },
-        exit => {
-          return exit.remove()
-        }
-      )
-  })
-
-  return edgeGSelection.select<SVGTextElement>(`g.${edgeLabelGClassName}`)
-}
-
-function renderEdgeLabel ({ edgeLabelGSelection, fullParams, fullChartParams }: {
-  edgeLabelGSelection: d3.Selection<SVGGElement, RenderEdge, any, unknown>
-  fullParams: ForceDirectedBubblesParams
-  fullChartParams: ChartParams
-}) {
-  edgeLabelGSelection.each((data,i,g) => {
-    const gSelection = d3.select(g[i])
-    gSelection.selectAll<SVGTextElement, RenderEdge>('text')
-      .data([data], d => d.id)
-      .join(
-        enter => {
-          const enterSelection = enter
-            .append('text')
-            .classed(edgeLabelClassName, true)
-            // .attr('cursor', 'pointer')
-            .attr('text-anchor', 'middle')
-            .attr('pointer-events', 'none')
-          return enterSelection
-        },
-        update => {
-          return update
-        },
-        exit => {
-          return exit.remove()
-        }
-      )
-      .text(d => d.label)
-      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.arrowLabel.colorType, fullChartParams }))
-      .attr('font-size', fullChartParams.styles.textSize)
-      .attr('style', d => fullParams.arrowLabel.styleFn(d))
-  })
-
-  return edgeLabelGSelection.select<SVGTextElement>(`text.${edgeLabelClassName}`)
-}
-
-function highlightNodes ({ nodeGSelection, edgeGSelection, highlightIds, fullChartParams }: {
-  nodeGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any>
-  edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any>
-  fullChartParams: ChartParams
-  highlightIds: string[]
-}) {
-  nodeGSelection.interrupt('highlight')
-  edgeGSelection.interrupt('highlight')
-  // console.log(highlightIds)
-  if (!highlightIds.length) {
-    nodeGSelection
-      .transition('highlight')
-      .style('opacity', 1)
-    edgeGSelection
-      .transition('highlight')
-      .style('opacity', 1)
-    return
-  }
-
-  edgeGSelection
-    .style('opacity', fullChartParams.styles.unhighlightedOpacity)  
-
-  nodeGSelection.each((d, i, n) => {
-    const segment = d3.select(n[i])
-
-    if (highlightIds.includes(d.id)) {
-      segment
-        .style('opacity', 1)
-        .transition('highlight')
-        .ease(d3.easeElastic)
-        .duration(500)
-    } else {
-      // 取消
-      segment
-        .style('opacity', fullChartParams.styles.unhighlightedOpacity)        
-    }
-  })
-}
-
-// 暫不處理edge的highlight
-// function highlightEdges ({ edgeGSelection, highlightIds, fullChartParams }: {
-//   edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any>
-//   fullChartParams: ChartParams
-//   highlightIds: string[]
-// }) {
-//   edgeGSelection.interrupt('highlight')
-
-//   if (!highlightIds.length) {
-//     edgeGSelection
-//       .transition('highlight')
-//       .style('opacity', 1)
-//     return
-//   }
-
-//   edgeGSelection.each((d, i, n) => {
-//     const segment = d3.select(n[i])
-
-//     if (highlightIds.includes(d.id)) {
-//       segment
-//         .style('opacity', 1)
-//         .transition('highlight')
-//         .ease(d3.easeElastic)
-//         .duration(500)
-//     } else {
-//       // 取消放大
-//       segment
-//         .style('opacity', fullChartParams.styles.unhighlightedOpacity)        
-//     }
-//   })
-// }
-
-export const ForceDirectedBubbles = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const gSelection = selection.append('g').classed(gSelectionClassName, true)
-  const defsSelection = gSelection.append('defs')
-  const edgeListGSelection = gSelection.append('g').classed(edgeListGClassName, true)
-  const nodeListGSelection = gSelection.append('g').classed(nodeListGClassName, true)
-
-  let nodeGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any> | undefined
-  let nodeCircleSelection: d3.Selection<SVGCircleElement, RenderNode, SVGGElement, any> | undefined
-  // let nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any> | undefined
-  // let nodeLabelSelection: d3.Selection<SVGTextElement, RenderNode, SVGGElement, any> | undefined
-  let edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any> | undefined
-  let edgeArrowSelection: d3.Selection<SVGPathElement, RenderEdge, SVGGElement, any> | undefined
-  let edgeLabelGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any> | undefined
-  let edgeLabelSelection: d3.Selection<SVGTextElement, RenderEdge, SVGGElement, any> | undefined
-
-  const dragStatus$ = new BehaviorSubject<DragStatus>('end') // start, drag, end
-  const mouseEvent$ = new Subject<EventRelationship>()
-
-
-  // init zoom
-  const d3Zoom$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    // map(d => d.scaleExtent),
-    // distinctUntilChanged((a, b) => String(a) === String(b)),
-    // first(),
-    map(data => {
-      let d3Zoom = data.zoomable
-        ? d3.zoom().on('zoom', (event) => {
-          // console.log(event)
-          // this.svgGroup.attr('transform', `translate(
-          //   ${event.transform.x + (this.zoom.xOffset * event.transform.k)},
-          //   ${event.transform.y + (this.zoom.yOffset * event.transform.k)}
-          // ) scale(
-          //   ${event.transform.k}
-          // )`)
-          gSelection.attr('transform', `translate(
-            ${event.transform.x},
-            ${event.transform.y}
-          ) scale(
-            ${event.transform.k}
-          )`)
-
-          // if (data.node.labelSizeFixed && nodeLabelSelection) {
-          //   // 反向 scale 抵消掉放大縮小
-          //   nodeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
-          // }
-          if (data.arrowLabel.sizeFixed && edgeLabelSelection) {
-            // 反向 scale 抵消掉放大縮小
-            edgeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
-          }
-        })
-        : d3.zoom().on('zoom', null)
-      if (data.scaleExtent) {
-        d3Zoom.scaleExtent([data.scaleExtent.min, data.scaleExtent.max])
-      }
-      rootSelection.call(d3Zoom)
-  
-      return d3Zoom
-    }),
-    // shareReplay(1)
-  )
-    
-  // zoom transform
-  combineLatest({
-    d3Zoom: d3Zoom$,
-    transform: observer.fullParams$.pipe(
-      takeUntil(destroy$),
-      map(d => d.transform),
-    )
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d)
-  ).subscribe(data => {
-    // console.log('call')
-    selection.call(
-      data.d3Zoom.transform, d3.zoomIdentity
-        .translate(data.transform.x, data.transform.y)
-        .scale(data.transform.k)
-    )
-  })
-
-  
-  const simulation$: Observable<d3.Simulation<d3.SimulationNodeDatum, undefined>> = combineLatest({
-    layout: observer.layout$.pipe(
-      first() // 只使用第一次的尺寸（置中）
-    ),
-    fullParams: observer.fullParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => createSimulation(data.layout, data.fullParams)),
-    shareReplay(1)
-  )
-
-  const nodeMinMaxValue$ = observer.computedData$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      const hadValueData = data.nodes.filter(d => d.value != undefined)
-      if (!hadValueData.length) {
-        return [0, 2] // 給預設值
-      }
-      const minMax = getMinMax(data.nodes.map(d => d.value))
-      if (hadValueData.length == 1 || minMax[0] === minMax[1]) {
-        return [minMax[0] - 1, minMax[1] + 1] // 避免最大最小值相同
-      }
-      return minMax
-    }),
-    shareReplay(1)
-  )
-
-  const edgeMinMaxValue$ = observer.computedData$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      const hadValueData = data.edges.filter(d => d.value != undefined)
-      if (!hadValueData.length) {
-        return [0, 2] // 給預設值
-      }
-      const minMax = getMinMax(data.edges.map(d => d.value))
-      if (hadValueData.length == 1 || minMax[0] === minMax[1]) {
-        return [minMax[0] - 1, minMax[1] + 1] // 避免最大最小值相同
-      }
-      return minMax
-    }),
-    shareReplay(1)
-  )
-
-  // 當無value時給的預設值
-  const defaultNodeValue$ = nodeMinMaxValue$.pipe(
-    takeUntil(destroy$),
-    map(data => (data[1] - data[0]) / 2) // 預設值為最大及最小的中間值
-  )
-
-  // 當無value時給的預設值
-  const defaultEdgeValue$ = edgeMinMaxValue$.pipe(
-    takeUntil(destroy$),
-    map(data => (data[1] - data[0]) / 2) // 預設值為最大及最小的中間值
-  )
-
-  const radiusScale$ = combineLatest({
-    nodeMinMaxValue: nodeMinMaxValue$,
-    fullParams: observer.fullParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      // console.log({ totalR: data.totalR, totalValue: data.totalValue })
-      return d3.scalePow()
-        .domain(data.nodeMinMaxValue)
-        .range([data.fullParams.bubble.radiusMin, data.fullParams.bubble.radiusMax])
-        .exponent(data.fullParams.bubble.arcScaleType === 'area'
-          ? 0.5 // 數值映射面積（0.5為取平方根）
-          : 1 // 數值映射半徑
-        )
-    })
-  )
-
-  const strokeWidthScale$ = combineLatest({
-    edgeMinMaxValue: edgeMinMaxValue$,
-    fullParams: observer.fullParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      return d3.scaleLinear()
-        .domain(data.edgeMinMaxValue)
-        .range([data.fullParams.arrow.strokeWidthMin, data.fullParams.arrow.strokeWidthMax])
-    })
-  )
-
-  // 先將未篩選的資料全部儲起來，就不會因為 visibleFilter 而重新計算
-  const RenderNodeMap$: Observable<Map<string, RenderNode>> = combineLatest({
-    computedData: observer.computedData$,
-    radiusScale: radiusScale$,
-    defaultNodeValue: defaultNodeValue$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      return new Map(
-        data.computedData.nodes.map(_d => {
-          let d: RenderNode = _d as RenderNode
-          d.r = data.radiusScale(d.value ?? data.defaultNodeValue)
-          return [d.id, d]
-        })
-      )
-    }),
-  )
-
-  // 先將未篩選的資料全部儲起來，就不會因為 visibleFilter 而重新計算
-  const RenderEdgeMap$: Observable<Map<string, RenderEdge>> = combineLatest({
-    computedData: observer.computedData$,
-    strokeWidthScale: strokeWidthScale$,
-    defaultEdgeValue: defaultEdgeValue$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      return new Map(
-        data.computedData.edges.map(_d => {
-          let d: any = _d as RenderEdge
-          d.source = _d.startNode // reference
-          d.target = _d.endNode
-          d.strokeWidth = data.strokeWidthScale(d.value ?? data.defaultEdgeValue)
-          d.markerId = `${defsArrowMarkerId}__${d.id}`
-          return [d.id, d]
-        })
-      )
-    }),
-  )
-
-  const renderData$: Observable<RenderData> = combineLatest({
-    visibleComputedData: observer.visibleComputedData$,
-    RenderNodeMap: RenderNodeMap$,
-    RenderEdgeMap: RenderEdgeMap$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      return {
-        nodes: data.visibleComputedData.nodes.map(d => data.RenderNodeMap.get(d.id)!),
-        edges: data.visibleComputedData.edges.map(d => data.RenderEdgeMap.get(d.id)!),
-      }
-    }),
-    shareReplay(1)
-  )
-
-  const markerParams$: Observable<MarkerParams> = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(fullParams => {
-      return {
-        viewBox: `-${fullParams.arrow.pointerWidth} -${fullParams.arrow.pointerHeight / 2} ${fullParams.arrow.pointerWidth} ${fullParams.arrow.pointerHeight}`,
-        d: `M${-fullParams.arrow.pointerWidth},${-fullParams.arrow.pointerHeight / 2}L0,0L${-fullParams.arrow.pointerWidth},${fullParams.arrow.pointerHeight / 2}`, // 箭頭的尖端為(0,0)
-        pointerWidth: fullParams.arrow.pointerWidth,
-        pointerHeight: fullParams.arrow.pointerHeight,
-      }
-    })
-  )
-
-  const markerData$: Observable<MarkerDatum[]> = combineLatest({
-    computedData: observer.computedData$,
-    fullParams: observer.fullParams$,
-    RenderNodeMap: RenderNodeMap$,
-    RenderEdgeMap: RenderEdgeMap$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      return data.computedData.edges.map(d => {
-        const renderEdge = data.RenderEdgeMap.get(d.id)!
-        const renderEndNode = data.RenderNodeMap.get(d.endNode.id)!
-        return {
-          id: renderEdge.markerId,
-          edgeId: d.id,
-          strokeWidth: renderEdge.strokeWidth,
-          /* refX:修正marker位置（計算出和circle半徑相等的寬度）
-          (1)circle半徑需加上 strokeWidth/2 是因為框線是以 circle 的邊緣往內及往外擴展，所以 stroke 多出來的寬度是一半而已
-          (2)circle半徑需除以 path 寬度是因為「marker 的位置會受到 path 的stroke-width影響」，所以要進行修正
-          (3)- 1 是要修正奇怪的誤差（不知原因）
-          */
-          refX: ((renderEndNode.r + (data.fullParams.bubble.strokeWidth / 2)) / renderEdge.strokeWidth) - 1
-        }
-      })
-    }),
-  )
-
-  // <marker> marker selection
-  combineLatest({
-    defsSelection,
-    markerParams: markerParams$,
-    markerData: markerData$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      return renderArrowMarker({
-        defsSelection,
-        markerParams: data.markerParams,
-        markerData: data.markerData,
-        fullParams: data.fullParams,
-        fullChartParams: data.fullChartParams
-      })
-    })
-  ).subscribe()
-
-
-  combineLatest({
-    renderData: renderData$,
-    computedData: observer.computedData$,
-    CategoryNodeMap: observer.CategoryNodeMap$,
-    simulation: simulation$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-  ).subscribe(data => {
-
-    nodeGSelection = renderNodeG({
-      nodeListGSelection: nodeListGSelection,
-      nodes: data.renderData.nodes as RenderNode[],
-    })
-
-    nodeCircleSelection = renderNodeCircle({
-      nodeGSelection: nodeGSelection,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams
-    })
-    nodeGSelection.call(drag(data.simulation, dragStatus$))
-
-    // nodeLabelGSelection = renderNodeLabelG({
-    //   nodeGSelection: nodeGSelection,
-    // })
-
-    // nodeLabelSelection = renderNodeLabel({
-    //   nodeLabelGSelection: nodeLabelGSelection,
-    //   fullParams: data.fullParams,
-    //   fullChartParams: data.fullChartParams
-    // })
-
-    edgeGSelection = renderEdgeG({
-      edgeListGSelection: edgeListGSelection,
-      edges: data.renderData.edges
-    })
-
-    edgeArrowSelection = renderEdgeArrowPath({
-      edgeGSelection: edgeGSelection,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams
-    })
-
-    edgeLabelGSelection = renderEdgeLabelG({
-      edgeGSelection: edgeGSelection,
-    })
-
-    edgeLabelSelection = renderEdgeLabel({
-      edgeLabelGSelection: edgeLabelGSelection,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams
-    })
-
-    data.simulation.nodes(data.renderData.nodes)
-      .on('tick', () => {
-        edgeArrowSelection.attr('d', linkArcFn)
-        nodeGSelection.attr('transform', translateFn)
-        // nodeLabelGSelection.attr('transform', d => translateFn({
-        //   x: d.x,
-        //   y: d.y - d.r - 10
-        // }))
-        edgeLabelGSelection.attr('transform', d => translateCenterFn(d))
-      })
-    ;(data.simulation.force("link") as any).links(data.renderData.edges)
-
-    data.simulation.alpha(0.3).restart()
-
-    nodeCircleSelection
-      .on('mouseover', (event, datum) => {
-        event.stopPropagation()
-
-        mouseEvent$.next({
-          type: 'relationship',
-          eventName: 'mouseover',
-          pluginName,
-          highlightTarget: data.fullChartParams.highlightTarget,
-          datum: datum,
-          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('mousemove', (event, datum) => {
-        event.stopPropagation()
-
-        mouseEvent$.next({
-          type: 'relationship',
-          eventName: 'mousemove',
-          pluginName,
-          highlightTarget: data.fullChartParams.highlightTarget,
-          datum: datum,
-          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('mouseout', (event, datum) => {
-        event.stopPropagation()
-
-        mouseEvent$.next({
-          type: 'relationship',
-          eventName: 'mouseout',
-          pluginName,
-          highlightTarget: data.fullChartParams.highlightTarget,
-          datum: datum,
-          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          event,
-          data: data.computedData
-        })
-      })
-      .on('click', (event, datum) => {
-        event.stopPropagation()
-
-        mouseEvent$.next({
-          type: 'relationship',
-          eventName: 'click',
-          pluginName,
-          highlightTarget: data.fullChartParams.highlightTarget,
-          datum: datum,
-          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          event,
-          data: data.computedData
-        })
-      })
-  })
-
-  dragStatus$.pipe(
-    distinctUntilChanged((a, b) => a === b),
-    // 只有沒有托曳時才執行
-    switchMap(d => iif(() => d === 'end', mouseEvent$, EMPTY))
-  ).subscribe(data => {
-    subject.event$.next(data)
-  })
-
-  combineLatest({
-    renderData: renderData$,
-    highlightNodes: observer.relationshipHighlightNodes$.pipe(
-      map(data => data.map(d => d.id))
-    ),
-    highlightEdges: observer.relationshipHighlightEdges$.pipe(
-      map(data => data.map(d => d.id))
-    ),
-    fullChartParams: observer.fullChartParams$,
-    fullParams: observer.fullParams$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d)
-  ).subscribe(data => {
-    if (!nodeGSelection || !edgeGSelection) {
-      return 
-    }
-    
-    highlightNodes({
-      nodeGSelection,
-      edgeGSelection,
-      highlightIds: data.highlightNodes,
-      fullChartParams: data.fullChartParams
-    })
-    // highlightEdges({
-    //   edgeGSelection,
-    //   highlightIds: data.highlightEdges,
-    //   fullChartParams: data.fullChartParams
-    // })
-  })
-  
-
-  
-  return () => {
-    destroy$.next(undefined)
-  }
+import * as d3 from 'd3'
+import {
+  of,
+  combineLatest,
+  map,
+  switchMap,
+  first,
+  takeUntil,
+  Subject, 
+  BehaviorSubject,
+  Observable,
+  distinctUntilChanged,
+  shareReplay,
+  take,
+  share,
+  filter,
+  iif,
+  EMPTY
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import type {
+  ChartParams,
+  DatumValue,
+  DataSeries,
+  EventName,
+  EventRelationship,
+  ComputedDataSeries,
+  ComputedNode,
+  ComputedEdge,
+  ContainerPosition,
+  Layout
+} from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin,
+  getMinMax
+} from '../../../lib/core'
+import type { BubblesParams, ArcScaleType, ForceDirectedBubblesParams } from '../../../lib/plugins-basic-types'
+import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS } from '../defaults'
+// import { renderCircleText } from '../../utils/d3Graphics'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+import { renderCircleText } from '../../utils/d3Graphics'
+
+// interface BubblesDatum extends ComputedNode {
+//   x: number
+//   y: number
+//   r: number
+//   _originR: number // 紀錄變化前的r
+// }
+
+type Zoom = {
+  xOffset: number
+  yOffset: number
+  scaleExtent: {
+    min: number
+    max: number
+  }
+}
+
+// d3 forceSimulation使用的node資料
+type RenderNode = d3.SimulationNodeDatum & ComputedNode & {
+  r: number
+}
+
+// d3 forceSimulation使用的edge資料
+interface RenderEdge extends ComputedEdge {
+  source: RenderNode
+  target: RenderNode
+  strokeWidth: number
+  markerId: string
+}
+
+// d3 forceSimulation使用的資料
+type RenderData = {
+  nodes: (ComputedNode | RenderNode)[] // 經過d3 forceSimulation計算後的node才有座標資訊
+  edges: RenderEdge[]
+}
+
+interface D3DragEvent {
+  active: number
+  dx: number
+  dy: number
+  identifier: string
+  sourceEvent: MouseEvent
+  subject: RenderNode
+  target: any
+  type: string
+  x: number
+  y: number
+}
+
+type DragStatus = 'start' | 'drag' | 'end'
+
+interface MarkerParams {
+  viewBox: string
+  d: string
+  pointerWidth: number
+  pointerHeight: number
+  // refX: number
+}
+
+interface MarkerDatum {
+  id: string
+  edgeId: string
+  strokeWidth: number
+  refX: number
+}
+
+// type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
+
+const pluginName = 'ForceDirectedBubbles'
+
+const baseLineHeight = 12 // 未變形前的字體大小（代入計算用而已，數字多少都不會有影響）
+
+const gSelectionClassName = getClassName(pluginName, 'zoom-area')
+const defsArrowMarkerId = getUniID(pluginName, 'arrow')
+const defsArrowMarkerClassName = getClassName(pluginName, 'arrow-marker')
+const edgeListGClassName = getClassName(pluginName, 'edge-list-g')
+const edgeGClassName = getClassName(pluginName, 'edge-g')
+const edgeArrowPathClassName = getClassName(pluginName, 'edge-arrow-path')
+const edgeLabelGClassName = getClassName(pluginName, 'edge-label-g')
+const edgeLabelClassName = getClassName(pluginName, 'edge-label')
+const nodeListGClassName = getClassName(pluginName, 'node-list-g')
+const nodeGClassName = getClassName(pluginName, 'node-g')
+const nodeCircleClassName = getClassName(pluginName, 'node-circle')
+// const nodeLabelGClassName = getClassName(pluginName, 'node-label-g')
+// const nodeLabelClassName = getClassName(pluginName, 'node-label')
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      bubble: {
+        toBeTypes: ['object']
+      },
+      bubbleLabel: {
+        toBeTypes: ['object']
+      },
+      arrow: {
+        toBeTypes: ['object']
+      },
+      arrowLabel: {
+        toBeTypes: ['object']
+      },
+      force: {
+        toBeTypes: ['object']
+      },
+      zoomable: {
+        toBeTypes: ['boolean']
+      },
+      transform: {
+        toBeTypes: ['object']
+      },
+      scaleExtent: {
+        toBeTypes: ['object']
+      }
+    })
+    if (params.bubble) {
+      const bubbleResult = validateColumns(params.bubble, {
+        radiusMin: {
+          toBeTypes: ['number']
+        },
+        radiusMax: {
+          toBeTypes: ['number']
+        },
+        arcScaleType: {
+          toBe: '"area" | "radius"',
+          test: (value) => value === 'area' || value === 'radius'
+        },
+        fillColorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeColorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeWidth: {
+          toBeTypes: ['number']
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (bubbleResult.status === 'error') {
+        return bubbleResult
+      }
+    }
+    if (params.bubbleLabel) {
+      const bubbleLabelResult = validateColumns(params.bubbleLabel, {
+        fillRate: {
+          toBeTypes: ['number']
+        },
+        lineHeight: {
+          toBeTypes: ['number']
+        },
+        maxLineLength: {
+          toBeTypes: ['number']
+        },
+        colorType: {
+          toBeOption: 'ColorType'
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (bubbleLabelResult.status === 'error') {
+        return bubbleLabelResult
+      }
+    }
+    if (params.arrow) {
+      const arrowResult = validateColumns(params.arrow, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeWidthMin: {
+          toBeTypes: ['number']
+        },
+        strokeWidthMax: {
+          toBeTypes: ['number']
+        },
+        pointerWidth: {
+          toBeTypes: ['number']
+        },
+        pointerHeight: {
+          toBeTypes: ['number']
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (arrowResult.status === 'error') {
+        return arrowResult
+      }
+    }
+    if (params.arrowLabel) {
+      const arrowLabelResult = validateColumns(params.arrowLabel, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
+        sizeFixed: {
+          toBeTypes: ['boolean']
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (arrowLabelResult.status === 'error') {
+        return arrowLabelResult
+      }
+    }
+    if (params.force) {
+      const forceResult = validateColumns(params.force, {
+        nodeStrength: {
+          toBeTypes: ['number']
+        },
+        linkDistance: {
+          toBeTypes: ['number']
+        },
+        velocityDecay: {
+          toBeTypes: ['number']
+        },
+        alphaDecay: {
+          toBeTypes: ['number']
+        },
+      })
+      if (forceResult.status === 'error') {
+        return forceResult
+      }
+    }
+    if (params.transform) {
+      const transformResult = validateColumns(params.transform, {
+        x: {
+          toBeTypes: ['number']
+        },
+        y: {
+          toBeTypes: ['number']
+        },
+        k: {
+          toBeTypes: ['number']
+        },
+      })
+      if (transformResult.status === 'error') {
+        return transformResult
+      }
+    }
+    if (params.scaleExtent) {
+      const scaleExtentResult = validateColumns(params.scaleExtent, {
+        min: {
+          toBeTypes: ['number']
+        },
+        max: {
+          toBeTypes: ['number']
+        },
+      })
+      if (scaleExtentResult.status === 'error') {
+        return scaleExtentResult
+      }
+    }
+    return result
+  }
+}
+
+// let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
+
+function createSimulation (layout: Layout, fullParams: ForceDirectedBubblesParams) {
+  return d3.forceSimulation()
+    .velocityDecay(fullParams.force.velocityDecay)
+    .alphaDecay(fullParams.force.alphaDecay)
+    .force(
+      "link",
+      d3.forceLink()
+        .id((d: d3.SimulationNodeDatum & ComputedNode) => d.id)
+        .strength(1)
+        .distance((d: d3.SimulationLinkDatum<d3.SimulationNodeDatum & ComputedNode>) => {
+          // if (d.direction === 'top') {
+          //   return 200
+          // } else {
+          //   return 250
+          // }
+          return fullParams.force.linkDistance
+        })
+    )
+    .force("charge", d3.forceManyBody().strength(fullParams.force.nodeStrength))
+    .force("collision", d3.forceCollide(fullParams.bubble.radiusMax).strength(1)) // 先以最大值設定
+    .force("center", d3.forceCenter(layout.width / 2, layout.height / 2))
+
+}
+
+function translateFn (d: any): string {
+  // console.log('translateFn', d)
+  return "translate(" + d.x + "," + d.y + ")";
+}
+
+function translateCenterFn (d: any): string {
+  // console.log('translateCenterFn', d)
+  const x = d.source.x + ((d.target.x - d.source.x) / 2) // 置中的話除2
+  const y = d.source.y + ((d.target.y - d.source.y) / 2) // 置中的話除2
+  return "translate(" + x + "," + y + ")";
+}
+
+function linkArcFn (d: RenderEdge): string {
+  // console.log('linkArcFn', d)
+  
+  // const dx = d.target.x - d.source.x,
+  //     dy = d.target.y - d.source.y
+  // dr讓方向線變成有弧度的
+  //     dr = Math.sqrt(dx * dx + dy * dy);
+  // return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
+  
+  // 直線
+  return "M" + d.source.x + "," + d.source.y + " L" + d.target.x + "," + d.target.y;
+
+
+}
+
+
+
+function renderArrowMarker ({ defsSelection, markerParams, markerData, fullParams, fullChartParams }: {
+  defsSelection: d3.Selection<SVGDefsElement, any, any, unknown>
+  markerParams: MarkerParams
+  markerData: MarkerDatum[]
+  fullParams: ForceDirectedBubblesParams
+  fullChartParams: ChartParams
+}) {
+  return defsSelection
+    .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
+    .data(markerData)
+    .join(
+      enter => {
+        const enterSelection = enter
+          .append("marker")
+          .classed(defsArrowMarkerClassName, true)
+          .attr("viewBox", markerParams.viewBox)
+          .attr("orient", "auto")
+        enterSelection.append("path")
+          .attr("d", markerParams.d)
+        return enterSelection
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit.remove()
+      }
+    )
+    .attr('id', d => d.id)
+    .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
+    .attr("markerWidth", markerParams.pointerWidth)
+    .attr("markerHeight", markerParams.pointerHeight)
+    .attr('refX', d => d.refX)
+    .attr("refY", 0)
+    
+
+}
+
+// function drag (): d3.DragBehavior<Element, unknown, unknown> {
+//   let originHighlightLockMode: boolean // 拖拽前的highlightLockMode
+
+//   return d3.drag()
+//     .on("start", (event: D3DragEvent) => {
+//       console.log('start', event.sourceEvent)
+//       // if (this.params.lockMode) {
+//       //   return
+//       // }
+//       // if (!d3.event.active) {
+//       //   this.forceRestart()
+//       // }
+//       // d.fx = d.x
+//       // d.fy = d.y
+
+//       // // 鎖定模式才不會在拖拽過程式觸發到其他事件造成衝突
+//       // originHighlightLockMode = this.highlightLockMode
+//       // this.highlightLockMode = true
+//       // this.noneStopMode = true
+//       // // 動畫會有點卡住所以乾脆拿掉
+//       // if(this.tooltip != null) {
+//       //   this.tooltip.remove()
+//       // }
+//     })
+//     .on("drag", function (event: D3DragEvent) {
+//       console.log('drag', event)
+//       // if (this.params.lockMode) {
+//       //   return
+//       // }
+//       // if (!d3.event.active) {
+//       //   this.force.alphaTarget(0)
+//       // }
+//       // d.fx = d3.event.x
+//       // d.fy = d3.event.y
+//       // d3.select(this).attr({
+//       //   'cx': event.x,
+//       //   'cy': event.y,
+//       // })
+//       d3.select(this)
+//         .attr('fx', event.x)
+//         .attr('fy', event.y)
+//     })
+//     .on("end", (event: D3DragEvent) => {
+//       console.log('end', event)
+//       // if (this.params.lockMode) {
+//       //   return
+//       // }
+//       // d.fx = null
+//       // d.fy = null
+
+//       // this.highlightLockMode = originHighlightLockMode // 還原拖拽前的highlightLockMode
+//       // this.noneStopMode = false
+//       // if (this.highlightLockMode) {
+//       //   this.forceStop()
+//       // }
+//     })
+// }
+
+function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dragStatus$: BehaviorSubject<DragStatus>) {    
+  function dragstarted (event: D3DragEvent, node: RenderNode) {
+    if (!event.active) {
+      simulation.alphaTarget(0.3).restart()
+    }
+    event.subject.fx = event.subject.x
+    event.subject.fy = event.subject.y
+    
+    dragStatus$.next('start')
+  }
+  
+  function dragged (event: D3DragEvent, node: RenderNode) {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
+
+    dragStatus$.next('drag')
+  }
+  
+  function dragended (event: D3DragEvent, node: RenderNode) {
+    if (!event.active) {
+      simulation.alphaTarget(0)
+    }
+    event.subject.fx = null
+    event.subject.fy = null
+
+    dragStatus$.next('end')
+  }
+  
+  return d3.drag()
+    .on("start", dragstarted)
+    .on("drag", dragged)
+    .on("end", dragended)
+}
+
+function renderNodeG ({ nodeListGSelection, nodes }: {
+  nodeListGSelection: d3.Selection<SVGGElement, any, any, unknown>
+  nodes: RenderNode[]
+}) {
+  return nodeListGSelection.selectAll<SVGGElement, RenderNode>('g')
+    .data(nodes, d => d.id)
+    .join(
+      enter => {
+        const enterSelection = enter
+          .append('g')
+          .classed(nodeGClassName, true)
+          // .attr('cursor', 'pointer')
+        return enterSelection
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit.remove()
+      }
+    )
+}
+
+function renderNodeCircle ({ nodeGSelection, fullParams, fullChartParams }: {
+  nodeGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
+  fullParams: ForceDirectedBubblesParams
+  fullChartParams: ChartParams
+}) {
+  nodeGSelection
+    .each((data,i,g) => {
+      const gSelection = d3.select(g[i])
+      gSelection.selectAll<SVGCircleElement, ComputedEdge>('circle')
+        .data([data])
+        .join(
+          enter => {
+            const enterSelection = enter
+              .append('circle')
+              .classed(nodeCircleClassName, true)
+              .attr('cursor', 'pointer')
+            return enterSelection
+          },
+          update => {
+            return update
+          },
+          exit => {
+            return exit.remove()
+          }
+        )
+        .attr('r', d => d.r)
+        .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.bubble.fillColorType, fullChartParams }))
+        .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.bubble.strokeColorType, fullChartParams }))
+        .attr('stroke-width', fullParams.bubble.strokeWidth)
+        .attr('style', d => fullParams.bubble.styleFn(d))
+        
+    })
+    .attr("text-anchor", "middle")
+    .attr('font-size', baseLineHeight)
+    .each((d,i,g) => {
+      const gSelection = d3.select(g[i])
+      
+      gSelection.call(renderCircleText, {
+        text: d.label,
+        radius: d.r * fullParams.bubbleLabel.fillRate,
+        lineHeight: baseLineHeight * fullParams.bubbleLabel.lineHeight,
+        isBreakAll: d.label.length <= fullParams.bubbleLabel.maxLineLength
+          ? false
+          : fullParams.bubbleLabel.wordBreakAll
+      })
+
+      // -- text color --
+      gSelection.select('text').attr('fill', _ => getDatumColor({
+        datum: d,
+        colorType: fullParams.bubbleLabel.colorType,
+        fullChartParams: fullChartParams
+      }))
+
+
+    })
+
+  nodeGSelection.select('text')
+    .attr('pointer-events', 'none')
+    .attr('style', d => fullParams.bubbleLabel.styleFn(d))
+
+  return nodeGSelection.select<SVGCircleElement>(`circle.${nodeCircleClassName}`)
+}
+
+// function renderNodeLabelG ({ nodeGSelection }: {
+//   nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
+// }) {
+//   nodeGSelection.each((data,i,g) => {
+//     const gSelection = d3.select(g[i])
+//     gSelection.selectAll<SVGGElement, RenderNode>('g')
+//       .data([data])
+//       .join(
+//         enter => {
+//           const enterSelection = enter
+//             .append('g')
+//             .classed(nodeLabelGClassName, true)
+//             // .attr('cursor', 'pointer')
+//           return enterSelection
+//         },
+//         update => {
+//           return update
+//         },
+//         exit => {
+//           return exit.remove()
+//         }
+//       )
+//   })
+
+//   return nodeGSelection.select<SVGTextElement>(`g.${nodeLabelGClassName}`)
+// }
+
+// function renderNodeLabel ({ nodeLabelGSelection, fullParams, fullChartParams }: {
+//   nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
+//   fullParams: ForceDirectedBubblesParams
+//   fullChartParams: ChartParams
+// }) {
+//   nodeLabelGSelection.each((data,i,g) => {
+//     const gSelection = d3.select(g[i])
+//     gSelection.selectAll<SVGTextElement, RenderNode>('text')
+//       .data([data], d => d.id)
+//       .join(
+//         enter => {
+//           const enterSelection = enter
+//             .append('text')
+//             .classed(nodeLabelClassName, true)
+//             // .attr('cursor', 'pointer')
+//             .attr('text-anchor', 'middle')
+//             .attr('pointer-events', 'none')
+//           return enterSelection
+//         },
+//         update => {
+//           return update
+//         },
+//         exit => {
+//           return exit.remove()
+//         }
+//       )
+//       .text(d => d.label)
+//       .attr('transform', d => `translate(0, ${- d.r - 10})`)
+//       .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.node.labelColorType, fullChartParams }))
+//       .attr('font-size', fullChartParams.styles.textSize)
+//       .attr('style', d => fullParams.node.labelStyleFn(d))
+//   })
+
+//   return nodeLabelGSelection.select<SVGTextElement>(`text.${nodeLabelClassName}`)
+// }
+
+function renderEdgeG ({ edgeListGSelection, edges }: {
+  edgeListGSelection: d3.Selection<SVGGElement, any, any, unknown>
+  edges: RenderEdge[]
+}) {
+  return edgeListGSelection.selectAll<SVGGElement, RenderEdge>('g')
+    .data(edges, d => d.id)
+    .join(
+      enter => {
+        const enterSelection = enter
+          .append('g')
+          .classed(edgeGClassName, true)
+          // .attr('cursor', 'pointer')
+        return enterSelection
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit.remove()
+      }
+    )
+}
+
+function renderEdgeArrowPath ({ edgeGSelection, fullParams, fullChartParams }: {
+  edgeGSelection: d3.Selection<SVGGElement, RenderEdge, any, unknown>
+  fullParams: ForceDirectedBubblesParams
+  fullChartParams: ChartParams
+}) {
+  edgeGSelection.each((data,i,g) => {
+    const gSelection = d3.select(g[i])
+    gSelection.selectAll<SVGPathElement, ComputedEdge>('path')
+      .data([data])
+      .join(
+        enter => {
+          return enter
+            .append('path')
+            .classed(edgeArrowPathClassName, true)
+        },
+        update => {
+          return update
+        },
+        exit => {
+          return exit.remove()
+        }
+      )
+      .attr('marker-end', d => `url(#${d.markerId})`)
+      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.arrow.colorType, fullChartParams }))
+      .attr('stroke-width', d => d.strokeWidth)
+      .attr('style', d => fullParams.arrow.styleFn(d))
+  })
+
+  return edgeGSelection.select<SVGPathElement>(`path.${edgeArrowPathClassName}`)
+}
+
+function renderEdgeLabelG ({ edgeGSelection }: {
+  edgeGSelection: d3.Selection<SVGGElement, any, any, unknown>
+}) {
+  edgeGSelection.each((data,i,g) => {
+    const gSelection = d3.select(g[i])
+    gSelection.selectAll<SVGGElement, RenderEdge>('g')
+      .data([data])
+      .join(
+        enter => {
+          const enterSelection = enter
+            .append('g')
+            .classed(edgeLabelGClassName, true)
+            // .attr('cursor', 'pointer')
+          return enterSelection
+        },
+        update => {
+          return update
+        },
+        exit => {
+          return exit.remove()
+        }
+      )
+  })
+
+  return edgeGSelection.select<SVGTextElement>(`g.${edgeLabelGClassName}`)
+}
+
+function renderEdgeLabel ({ edgeLabelGSelection, fullParams, fullChartParams }: {
+  edgeLabelGSelection: d3.Selection<SVGGElement, RenderEdge, any, unknown>
+  fullParams: ForceDirectedBubblesParams
+  fullChartParams: ChartParams
+}) {
+  edgeLabelGSelection.each((data,i,g) => {
+    const gSelection = d3.select(g[i])
+    gSelection.selectAll<SVGTextElement, RenderEdge>('text')
+      .data([data], d => d.id)
+      .join(
+        enter => {
+          const enterSelection = enter
+            .append('text')
+            .classed(edgeLabelClassName, true)
+            // .attr('cursor', 'pointer')
+            .attr('text-anchor', 'middle')
+            .attr('pointer-events', 'none')
+          return enterSelection
+        },
+        update => {
+          return update
+        },
+        exit => {
+          return exit.remove()
+        }
+      )
+      .text(d => d.label)
+      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.arrowLabel.colorType, fullChartParams }))
+      .attr('font-size', fullChartParams.styles.textSize)
+      .attr('style', d => fullParams.arrowLabel.styleFn(d))
+  })
+
+  return edgeLabelGSelection.select<SVGTextElement>(`text.${edgeLabelClassName}`)
+}
+
+function highlightNodes ({ nodeGSelection, edgeGSelection, highlightIds, fullChartParams }: {
+  nodeGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any>
+  edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any>
+  fullChartParams: ChartParams
+  highlightIds: string[]
+}) {
+  nodeGSelection.interrupt('highlight')
+  edgeGSelection.interrupt('highlight')
+  // console.log(highlightIds)
+  if (!highlightIds.length) {
+    nodeGSelection
+      .transition('highlight')
+      .style('opacity', 1)
+    edgeGSelection
+      .transition('highlight')
+      .style('opacity', 1)
+    return
+  }
+
+  edgeGSelection
+    .style('opacity', fullChartParams.styles.unhighlightedOpacity)  
+
+  nodeGSelection.each((d, i, n) => {
+    const segment = d3.select(n[i])
+
+    if (highlightIds.includes(d.id)) {
+      segment
+        .style('opacity', 1)
+        .transition('highlight')
+        .ease(d3.easeElastic)
+        .duration(500)
+    } else {
+      // 取消
+      segment
+        .style('opacity', fullChartParams.styles.unhighlightedOpacity)        
+    }
+  })
+}
+
+// 暫不處理edge的highlight
+// function highlightEdges ({ edgeGSelection, highlightIds, fullChartParams }: {
+//   edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any>
+//   fullChartParams: ChartParams
+//   highlightIds: string[]
+// }) {
+//   edgeGSelection.interrupt('highlight')
+
+//   if (!highlightIds.length) {
+//     edgeGSelection
+//       .transition('highlight')
+//       .style('opacity', 1)
+//     return
+//   }
+
+//   edgeGSelection.each((d, i, n) => {
+//     const segment = d3.select(n[i])
+
+//     if (highlightIds.includes(d.id)) {
+//       segment
+//         .style('opacity', 1)
+//         .transition('highlight')
+//         .ease(d3.easeElastic)
+//         .duration(500)
+//     } else {
+//       // 取消放大
+//       segment
+//         .style('opacity', fullChartParams.styles.unhighlightedOpacity)        
+//     }
+//   })
+// }
+
+export const ForceDirectedBubbles = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const gSelection = selection.append('g').classed(gSelectionClassName, true)
+  const defsSelection = gSelection.append('defs')
+  const edgeListGSelection = gSelection.append('g').classed(edgeListGClassName, true)
+  const nodeListGSelection = gSelection.append('g').classed(nodeListGClassName, true)
+
+  let nodeGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any> | undefined
+  let nodeCircleSelection: d3.Selection<SVGCircleElement, RenderNode, SVGGElement, any> | undefined
+  // let nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, SVGGElement, any> | undefined
+  // let nodeLabelSelection: d3.Selection<SVGTextElement, RenderNode, SVGGElement, any> | undefined
+  let edgeGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any> | undefined
+  let edgeArrowSelection: d3.Selection<SVGPathElement, RenderEdge, SVGGElement, any> | undefined
+  let edgeLabelGSelection: d3.Selection<SVGGElement, RenderEdge, SVGGElement, any> | undefined
+  let edgeLabelSelection: d3.Selection<SVGTextElement, RenderEdge, SVGGElement, any> | undefined
+
+  const dragStatus$ = new BehaviorSubject<DragStatus>('end') // start, drag, end
+  const mouseEvent$ = new Subject<EventRelationship>()
+
+
+  // init zoom
+  const d3Zoom$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    // map(d => d.scaleExtent),
+    // distinctUntilChanged((a, b) => String(a) === String(b)),
+    // first(),
+    map(data => {
+      let d3Zoom = data.zoomable
+        ? d3.zoom().on('zoom', (event) => {
+          // console.log(event)
+          // this.svgGroup.attr('transform', `translate(
+          //   ${event.transform.x + (this.zoom.xOffset * event.transform.k)},
+          //   ${event.transform.y + (this.zoom.yOffset * event.transform.k)}
+          // ) scale(
+          //   ${event.transform.k}
+          // )`)
+          gSelection.attr('transform', `translate(
+            ${event.transform.x},
+            ${event.transform.y}
+          ) scale(
+            ${event.transform.k}
+          )`)
+
+          // if (data.node.labelSizeFixed && nodeLabelSelection) {
+          //   // 反向 scale 抵消掉放大縮小
+          //   nodeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
+          // }
+          if (data.arrowLabel.sizeFixed && edgeLabelSelection) {
+            // 反向 scale 抵消掉放大縮小
+            edgeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
+          }
+        })
+        : d3.zoom().on('zoom', null)
+      if (data.scaleExtent) {
+        d3Zoom.scaleExtent([data.scaleExtent.min, data.scaleExtent.max])
+      }
+      rootSelection.call(d3Zoom)
+  
+      return d3Zoom
+    }),
+    // shareReplay(1)
+  )
+    
+  // zoom transform
+  combineLatest({
+    d3Zoom: d3Zoom$,
+    transform: observer.fullParams$.pipe(
+      takeUntil(destroy$),
+      map(d => d.transform),
+    )
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    // console.log('call')
+    selection.call(
+      data.d3Zoom.transform, d3.zoomIdentity
+        .translate(data.transform.x, data.transform.y)
+        .scale(data.transform.k)
+    )
+  })
+
+  
+  const simulation$: Observable<d3.Simulation<d3.SimulationNodeDatum, undefined>> = combineLatest({
+    layout: observer.layout$.pipe(
+      first() // 只使用第一次的尺寸（置中）
+    ),
+    fullParams: observer.fullParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => createSimulation(data.layout, data.fullParams)),
+    shareReplay(1)
+  )
+
+  const nodeMinMaxValue$ = observer.computedData$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      const hadValueData = data.nodes.filter(d => d.value != undefined)
+      if (!hadValueData.length) {
+        return [0, 2] // 給預設值
+      }
+      const minMax = getMinMax(data.nodes.map(d => d.value))
+      if (hadValueData.length == 1 || minMax[0] === minMax[1]) {
+        return [minMax[0] - 1, minMax[1] + 1] // 避免最大最小值相同
+      }
+      return minMax
+    }),
+    shareReplay(1)
+  )
+
+  const edgeMinMaxValue$ = observer.computedData$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      const hadValueData = data.edges.filter(d => d.value != undefined)
+      if (!hadValueData.length) {
+        return [0, 2] // 給預設值
+      }
+      const minMax = getMinMax(data.edges.map(d => d.value))
+      if (hadValueData.length == 1 || minMax[0] === minMax[1]) {
+        return [minMax[0] - 1, minMax[1] + 1] // 避免最大最小值相同
+      }
+      return minMax
+    }),
+    shareReplay(1)
+  )
+
+  // 當無value時給的預設值
+  const defaultNodeValue$ = nodeMinMaxValue$.pipe(
+    takeUntil(destroy$),
+    map(data => (data[1] - data[0]) / 2) // 預設值為最大及最小的中間值
+  )
+
+  // 當無value時給的預設值
+  const defaultEdgeValue$ = edgeMinMaxValue$.pipe(
+    takeUntil(destroy$),
+    map(data => (data[1] - data[0]) / 2) // 預設值為最大及最小的中間值
+  )
+
+  const radiusScale$ = combineLatest({
+    nodeMinMaxValue: nodeMinMaxValue$,
+    fullParams: observer.fullParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      // console.log({ totalR: data.totalR, totalValue: data.totalValue })
+      return d3.scalePow()
+        .domain(data.nodeMinMaxValue)
+        .range([data.fullParams.bubble.radiusMin, data.fullParams.bubble.radiusMax])
+        .exponent(data.fullParams.bubble.arcScaleType === 'area'
+          ? 0.5 // 數值映射面積（0.5為取平方根）
+          : 1 // 數值映射半徑
+        )
+    })
+  )
+
+  const strokeWidthScale$ = combineLatest({
+    edgeMinMaxValue: edgeMinMaxValue$,
+    fullParams: observer.fullParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return d3.scaleLinear()
+        .domain(data.edgeMinMaxValue)
+        .range([data.fullParams.arrow.strokeWidthMin, data.fullParams.arrow.strokeWidthMax])
+    })
+  )
+
+  // 先將未篩選的資料全部儲起來，就不會因為 visibleFilter 而重新計算
+  const RenderNodeMap$: Observable<Map<string, RenderNode>> = combineLatest({
+    computedData: observer.computedData$,
+    radiusScale: radiusScale$,
+    defaultNodeValue: defaultNodeValue$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return new Map(
+        data.computedData.nodes.map(_d => {
+          let d: RenderNode = _d as RenderNode
+          d.r = data.radiusScale(d.value ?? data.defaultNodeValue)
+          return [d.id, d]
+        })
+      )
+    }),
+  )
+
+  // 先將未篩選的資料全部儲起來，就不會因為 visibleFilter 而重新計算
+  const RenderEdgeMap$: Observable<Map<string, RenderEdge>> = combineLatest({
+    computedData: observer.computedData$,
+    strokeWidthScale: strokeWidthScale$,
+    defaultEdgeValue: defaultEdgeValue$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return new Map(
+        data.computedData.edges.map(_d => {
+          let d: any = _d as RenderEdge
+          d.source = _d.startNode // reference
+          d.target = _d.endNode
+          d.strokeWidth = data.strokeWidthScale(d.value ?? data.defaultEdgeValue)
+          d.markerId = `${defsArrowMarkerId}__${d.id}`
+          return [d.id, d]
+        })
+      )
+    }),
+  )
+
+  const renderData$: Observable<RenderData> = combineLatest({
+    visibleComputedData: observer.visibleComputedData$,
+    RenderNodeMap: RenderNodeMap$,
+    RenderEdgeMap: RenderEdgeMap$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return {
+        nodes: data.visibleComputedData.nodes.map(d => data.RenderNodeMap.get(d.id)!),
+        edges: data.visibleComputedData.edges.map(d => data.RenderEdgeMap.get(d.id)!),
+      }
+    }),
+    shareReplay(1)
+  )
+
+  const markerParams$: Observable<MarkerParams> = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(fullParams => {
+      return {
+        viewBox: `-${fullParams.arrow.pointerWidth} -${fullParams.arrow.pointerHeight / 2} ${fullParams.arrow.pointerWidth} ${fullParams.arrow.pointerHeight}`,
+        d: `M${-fullParams.arrow.pointerWidth},${-fullParams.arrow.pointerHeight / 2}L0,0L${-fullParams.arrow.pointerWidth},${fullParams.arrow.pointerHeight / 2}`, // 箭頭的尖端為(0,0)
+        pointerWidth: fullParams.arrow.pointerWidth,
+        pointerHeight: fullParams.arrow.pointerHeight,
+      }
+    })
+  )
+
+  const markerData$: Observable<MarkerDatum[]> = combineLatest({
+    computedData: observer.computedData$,
+    fullParams: observer.fullParams$,
+    RenderNodeMap: RenderNodeMap$,
+    RenderEdgeMap: RenderEdgeMap$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      return data.computedData.edges.map(d => {
+        const renderEdge = data.RenderEdgeMap.get(d.id)!
+        const renderEndNode = data.RenderNodeMap.get(d.endNode.id)!
+        return {
+          id: renderEdge.markerId,
+          edgeId: d.id,
+          strokeWidth: renderEdge.strokeWidth,
+          /* refX:修正marker位置（計算出和circle半徑相等的寬度）
+          (1)circle半徑需加上 strokeWidth/2 是因為框線是以 circle 的邊緣往內及往外擴展，所以 stroke 多出來的寬度是一半而已
+          (2)circle半徑需除以 path 寬度是因為「marker 的位置會受到 path 的stroke-width影響」，所以要進行修正
+          (3)- 1 是要修正奇怪的誤差（不知原因）
+          */
+          refX: ((renderEndNode.r + (data.fullParams.bubble.strokeWidth / 2)) / renderEdge.strokeWidth) - 1
+        }
+      })
+    }),
+  )
+
+  // <marker> marker selection
+  combineLatest({
+    defsSelection,
+    markerParams: markerParams$,
+    markerData: markerData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      return renderArrowMarker({
+        defsSelection,
+        markerParams: data.markerParams,
+        markerData: data.markerData,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams
+      })
+    })
+  ).subscribe()
+
+
+  combineLatest({
+    renderData: renderData$,
+    computedData: observer.computedData$,
+    CategoryNodeMap: observer.CategoryNodeMap$,
+    simulation: simulation$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+  ).subscribe(data => {
+
+    nodeGSelection = renderNodeG({
+      nodeListGSelection: nodeListGSelection,
+      nodes: data.renderData.nodes as RenderNode[],
+    })
+
+    nodeCircleSelection = renderNodeCircle({
+      nodeGSelection: nodeGSelection,
+      fullParams: data.fullParams,
+      fullChartParams: data.fullChartParams
+    })
+    nodeGSelection.call(drag(data.simulation, dragStatus$))
+
+    // nodeLabelGSelection = renderNodeLabelG({
+    //   nodeGSelection: nodeGSelection,
+    // })
+
+    // nodeLabelSelection = renderNodeLabel({
+    //   nodeLabelGSelection: nodeLabelGSelection,
+    //   fullParams: data.fullParams,
+    //   fullChartParams: data.fullChartParams
+    // })
+
+    edgeGSelection = renderEdgeG({
+      edgeListGSelection: edgeListGSelection,
+      edges: data.renderData.edges
+    })
+
+    edgeArrowSelection = renderEdgeArrowPath({
+      edgeGSelection: edgeGSelection,
+      fullParams: data.fullParams,
+      fullChartParams: data.fullChartParams
+    })
+
+    edgeLabelGSelection = renderEdgeLabelG({
+      edgeGSelection: edgeGSelection,
+    })
+
+    edgeLabelSelection = renderEdgeLabel({
+      edgeLabelGSelection: edgeLabelGSelection,
+      fullParams: data.fullParams,
+      fullChartParams: data.fullChartParams
+    })
+
+    data.simulation.nodes(data.renderData.nodes)
+      .on('tick', () => {
+        edgeArrowSelection.attr('d', linkArcFn)
+        nodeGSelection.attr('transform', translateFn)
+        // nodeLabelGSelection.attr('transform', d => translateFn({
+        //   x: d.x,
+        //   y: d.y - d.r - 10
+        // }))
+        edgeLabelGSelection.attr('transform', d => translateCenterFn(d))
+      })
+    ;(data.simulation.force("link") as any).links(data.renderData.edges)
+
+    data.simulation.alpha(0.3).restart()
+
+    nodeCircleSelection
+      .on('mouseover', (event, datum) => {
+        event.stopPropagation()
+
+        mouseEvent$.next({
+          type: 'relationship',
+          eventName: 'mouseover',
+          pluginName,
+          highlightTarget: data.fullChartParams.highlightTarget,
+          datum: datum,
+          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          event,
+          data: data.computedData
+        })
+      })
+      .on('mousemove', (event, datum) => {
+        event.stopPropagation()
+
+        mouseEvent$.next({
+          type: 'relationship',
+          eventName: 'mousemove',
+          pluginName,
+          highlightTarget: data.fullChartParams.highlightTarget,
+          datum: datum,
+          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          event,
+          data: data.computedData
+        })
+      })
+      .on('mouseout', (event, datum) => {
+        event.stopPropagation()
+
+        mouseEvent$.next({
+          type: 'relationship',
+          eventName: 'mouseout',
+          pluginName,
+          highlightTarget: data.fullChartParams.highlightTarget,
+          datum: datum,
+          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          event,
+          data: data.computedData
+        })
+      })
+      .on('click', (event, datum) => {
+        event.stopPropagation()
+
+        mouseEvent$.next({
+          type: 'relationship',
+          eventName: 'click',
+          pluginName,
+          highlightTarget: data.fullChartParams.highlightTarget,
+          datum: datum,
+          category: data.CategoryNodeMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          event,
+          data: data.computedData
+        })
+      })
+  })
+
+  dragStatus$.pipe(
+    distinctUntilChanged((a, b) => a === b),
+    // 只有沒有托曳時才執行
+    switchMap(d => iif(() => d === 'end', mouseEvent$, EMPTY))
+  ).subscribe(data => {
+    subject.event$.next(data)
+  })
+
+  combineLatest({
+    renderData: renderData$,
+    highlightNodes: observer.relationshipHighlightNodes$.pipe(
+      map(data => data.map(d => d.id))
+    ),
+    highlightEdges: observer.relationshipHighlightEdges$.pipe(
+      map(data => data.map(d => d.id))
+    ),
+    fullChartParams: observer.fullChartParams$,
+    fullParams: observer.fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    if (!nodeGSelection || !edgeGSelection) {
+      return 
+    }
+    
+    highlightNodes({
+      nodeGSelection,
+      edgeGSelection,
+      highlightIds: data.highlightNodes,
+      fullChartParams: data.fullChartParams
+    })
+    // highlightEdges({
+    //   edgeGSelection,
+    //   highlightIds: data.highlightEdges,
+    //   fullChartParams: data.fullChartParams
+    // })
+  })
+  
+
+  
+  return () => {
+    destroy$.next(undefined)
+  }
 })