@orbcharts/plugins-basic 3.0.6 → 3.0.8

package/src/relationship/plugins/ForceDirected.ts

@@ -1,1057 +1,1057 @@
-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 } from '../../../lib/core'
-import type { BubblesParams, ArcScaleType, ForceDirectedParams } from '../../../lib/plugins-basic-types'
-import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { DEFAULT_FORCE_DIRECTED_PARAMS } from '../defaults'
-// import { renderCircleText } from '../../utils/d3Graphics'
-import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-import { d3EventObservable } from '../../utils/observables'
-
-// 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
-
-// d3 forceSimulation使用的edge資料
-interface RenderEdge extends ComputedEdge {
-  source: RenderNode
-  target: RenderNode
-}
-
-// 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'
-
-// type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
-
-const pluginName = 'ForceDirected'
-
-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_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_FORCE_DIRECTED_PARAMS,
-  layerIndex: LAYER_INDEX_OF_GRAPHIC,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      dot: {
-        toBeTypes: ['object']
-      },
-      dotLabel: {
-        toBeTypes: ['object']
-      },
-      arrow: {
-        toBeTypes: ['object']
-      },
-      arrowLabel: {
-        toBeTypes: ['object']
-      },
-      force: {
-        toBeTypes: ['object']
-      },
-      zoomable: {
-        toBeTypes: ['boolean']
-      },
-      transform: {
-        toBeTypes: ['object']
-      },
-      scaleExtent: {
-        toBeTypes: ['object']
-      }
-    })
-    if (params.dot) {
-      const dotResult = validateColumns(params.dot, {
-        radius: {
-          toBeTypes: ['number']
-        },
-        fillColorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeColorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeWidth: {
-          toBeTypes: ['number']
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (dotResult.status === 'error') {
-        return dotResult
-      }
-    }
-    if (params.dotLabel) {
-      const dotLabelResult = validateColumns(params.dotLabel, {
-        colorType: {
-          toBeOption: 'ColorType'
-        },
-        sizeFixed: {
-          toBeTypes: ['boolean']
-        },
-        styleFn: {
-          toBeTypes: ['Function']
-        },
-      })
-      if (dotLabelResult.status === 'error') {
-        return dotLabelResult
-      }
-    }
-    if (params.arrow) {
-      const arrowResult = validateColumns(params.arrow, {
-        colorType: {
-          toBeOption: 'ColorType'
-        },
-        strokeWidth: {
-          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: ForceDirectedParams) {
-  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.dot.radius).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: d3.Selection<SVGDefsElement, any, any, unknown>, fullParams: ForceDirectedParams, fullChartParams: ChartParams) {
-  return defsSelection
-    .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
-    .data([fullParams])
-    .join(
-      enter => {
-        const enterSelection = enter
-          .append("marker")
-          .classed(defsArrowMarkerClassName, true)
-          .attr('id', defsArrowMarkerId)
-          .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
-          .attr("viewBox", d => `-${d.arrow.pointerWidth} -${d.arrow.pointerHeight / 2} ${d.arrow.pointerWidth} ${d.arrow.pointerHeight}`)
-          .attr("orient", "auto")
-        enterSelection.append("path")
-          .attr("d", d => `M${-d.arrow.pointerWidth},${-d.arrow.pointerHeight / 2}L0,0L${-d.arrow.pointerWidth},${d.arrow.pointerHeight / 2}`) // 箭頭的尖端為(0,0)
-        return enterSelection
-      },
-      update => {
-        return update
-      },
-      exit => {
-        return exit.remove()
-      }
-    )
-    .attr("markerWidth", d => d.arrow.pointerWidth)
-    .attr("markerHeight", d => d.arrow.pointerHeight)
-    /* refX:修正marker位置（計算出和circle半徑相等的寬度）
-    (1)circle半徑需加上 strokeWidth/2 是因為框線是以 circle 的邊緣往內及往外擴展，所以 stroke 多出來的寬度是一半而已
-    (2)circle半徑需除以 path 寬度是因為「marker 的位置會受到 path 的stroke-width影響」，所以要進行修正
-    (3)- 1 是要修正奇怪的誤差（不知原因）
-    */
-    .attr('refX', d => ((d.dot.radius + (fullParams.dot.strokeWidth / 2)) / d.arrow.strokeWidth) - 1)
-    .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.x
-    event.subject.fy = event.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: ForceDirectedParams
-  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', fullParams.dot.radius)
-      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.dot.fillColorType, fullChartParams }))
-      .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.dot.strokeColorType, fullChartParams }))
-      .attr('stroke-width', fullParams.dot.strokeWidth)
-      .attr('style', d => fullParams.dot.styleFn(d))
-  })
-
-  return nodeGSelection.select<SVGCircleElement>(`circle.${nodeCircleClassName}`)
-}
-
-function renderNodeLabelG ({ nodeGSelection, fullParams }: {
-  nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
-  fullParams: ForceDirectedParams
-}) {
-  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()
-        }
-      )
-      .attr('transform', `translate(0, ${- fullParams.dot.radius - 10})`)
-  })
-
-  return nodeGSelection.select<SVGTextElement>(`g.${nodeLabelGClassName}`)
-}
-
-function renderNodeLabel ({ nodeLabelGSelection, fullParams, fullChartParams }: {
-  nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
-  fullParams: ForceDirectedParams
-  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('fill', d => getDatumColor({ datum: d, colorType: fullParams.dotLabel.colorType, fullChartParams }))
-      .attr('font-size', fullChartParams.styles.textSize)
-      .attr('style', d => fullParams.dotLabel.styleFn(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: ForceDirectedParams
-  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)
-            .attr('marker-end', `url(#${defsArrowMarkerId})`)
-        },
-        update => {
-          return update
-        },
-        exit => {
-          return exit.remove()
-        }
-      )
-      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.arrow.colorType, fullChartParams }))
-      .attr('stroke-width', fullParams.arrow.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: ForceDirectedParams
-  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 ForceDirected = 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>()
-
-  // <marker> marker selection
-  combineLatest({
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(({ fullParams, fullChartParams }) => {
-      return renderArrowMarker(defsSelection, fullParams, fullChartParams)
-    })
-  ).subscribe()
-
-  // 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.dotLabel.sizeFixed && 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 renderData$: Observable<RenderData> = observer.visibleComputedData$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return {
-        nodes: data.nodes,
-        edges: data.edges.map(_d => {
-          let d: RenderEdge = _d as RenderEdge
-          d.source = _d.startNode // reference
-          d.target = _d.endNode
-          return d
-        })
-      }
-    }),
-    shareReplay(1)
-  )
-
-  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,
-    })
-
-    nodeCircleSelection = renderNodeCircle({
-      nodeGSelection: nodeGSelection,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams
-    })
-    nodeGSelection.call(drag(data.simulation, dragStatus$))
-
-    nodeLabelGSelection = renderNodeLabelG({
-      nodeGSelection: nodeGSelection,
-      fullParams: data.fullParams
-    })
-
-    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 - data.fullParams.dot.radius - 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 } from '../../../lib/core'
+import type { BubblesParams, ArcScaleType, ForceDirectedParams } from '../../../lib/plugins-basic-types'
+import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { DEFAULT_FORCE_DIRECTED_PARAMS } from '../defaults'
+// import { renderCircleText } from '../../utils/d3Graphics'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+import { d3EventObservable } from '../../utils/observables'
+
+// 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
+
+// d3 forceSimulation使用的edge資料
+interface RenderEdge extends ComputedEdge {
+  source: RenderNode
+  target: RenderNode
+}
+
+// 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'
+
+// type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
+
+const pluginName = 'ForceDirected'
+
+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_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_FORCE_DIRECTED_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      dot: {
+        toBeTypes: ['object']
+      },
+      dotLabel: {
+        toBeTypes: ['object']
+      },
+      arrow: {
+        toBeTypes: ['object']
+      },
+      arrowLabel: {
+        toBeTypes: ['object']
+      },
+      force: {
+        toBeTypes: ['object']
+      },
+      zoomable: {
+        toBeTypes: ['boolean']
+      },
+      transform: {
+        toBeTypes: ['object']
+      },
+      scaleExtent: {
+        toBeTypes: ['object']
+      }
+    })
+    if (params.dot) {
+      const dotResult = validateColumns(params.dot, {
+        radius: {
+          toBeTypes: ['number']
+        },
+        fillColorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeColorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeWidth: {
+          toBeTypes: ['number']
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (dotResult.status === 'error') {
+        return dotResult
+      }
+    }
+    if (params.dotLabel) {
+      const dotLabelResult = validateColumns(params.dotLabel, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
+        sizeFixed: {
+          toBeTypes: ['boolean']
+        },
+        styleFn: {
+          toBeTypes: ['Function']
+        },
+      })
+      if (dotLabelResult.status === 'error') {
+        return dotLabelResult
+      }
+    }
+    if (params.arrow) {
+      const arrowResult = validateColumns(params.arrow, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
+        strokeWidth: {
+          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: ForceDirectedParams) {
+  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.dot.radius).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: d3.Selection<SVGDefsElement, any, any, unknown>, fullParams: ForceDirectedParams, fullChartParams: ChartParams) {
+  return defsSelection
+    .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
+    .data([fullParams])
+    .join(
+      enter => {
+        const enterSelection = enter
+          .append("marker")
+          .classed(defsArrowMarkerClassName, true)
+          .attr('id', defsArrowMarkerId)
+          .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
+          .attr("viewBox", d => `-${d.arrow.pointerWidth} -${d.arrow.pointerHeight / 2} ${d.arrow.pointerWidth} ${d.arrow.pointerHeight}`)
+          .attr("orient", "auto")
+        enterSelection.append("path")
+          .attr("d", d => `M${-d.arrow.pointerWidth},${-d.arrow.pointerHeight / 2}L0,0L${-d.arrow.pointerWidth},${d.arrow.pointerHeight / 2}`) // 箭頭的尖端為(0,0)
+        return enterSelection
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit.remove()
+      }
+    )
+    .attr("markerWidth", d => d.arrow.pointerWidth)
+    .attr("markerHeight", d => d.arrow.pointerHeight)
+    /* refX:修正marker位置（計算出和circle半徑相等的寬度）
+    (1)circle半徑需加上 strokeWidth/2 是因為框線是以 circle 的邊緣往內及往外擴展，所以 stroke 多出來的寬度是一半而已
+    (2)circle半徑需除以 path 寬度是因為「marker 的位置會受到 path 的stroke-width影響」，所以要進行修正
+    (3)- 1 是要修正奇怪的誤差（不知原因）
+    */
+    .attr('refX', d => ((d.dot.radius + (fullParams.dot.strokeWidth / 2)) / d.arrow.strokeWidth) - 1)
+    .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.x
+    event.subject.fy = event.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: ForceDirectedParams
+  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', fullParams.dot.radius)
+      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.dot.fillColorType, fullChartParams }))
+      .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.dot.strokeColorType, fullChartParams }))
+      .attr('stroke-width', fullParams.dot.strokeWidth)
+      .attr('style', d => fullParams.dot.styleFn(d))
+  })
+
+  return nodeGSelection.select<SVGCircleElement>(`circle.${nodeCircleClassName}`)
+}
+
+function renderNodeLabelG ({ nodeGSelection, fullParams }: {
+  nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
+  fullParams: ForceDirectedParams
+}) {
+  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()
+        }
+      )
+      .attr('transform', `translate(0, ${- fullParams.dot.radius - 10})`)
+  })
+
+  return nodeGSelection.select<SVGTextElement>(`g.${nodeLabelGClassName}`)
+}
+
+function renderNodeLabel ({ nodeLabelGSelection, fullParams, fullChartParams }: {
+  nodeLabelGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
+  fullParams: ForceDirectedParams
+  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('fill', d => getDatumColor({ datum: d, colorType: fullParams.dotLabel.colorType, fullChartParams }))
+      .attr('font-size', fullChartParams.styles.textSize)
+      .attr('style', d => fullParams.dotLabel.styleFn(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: ForceDirectedParams
+  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)
+            .attr('marker-end', `url(#${defsArrowMarkerId})`)
+        },
+        update => {
+          return update
+        },
+        exit => {
+          return exit.remove()
+        }
+      )
+      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.arrow.colorType, fullChartParams }))
+      .attr('stroke-width', fullParams.arrow.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: ForceDirectedParams
+  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 ForceDirected = 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>()
+
+  // <marker> marker selection
+  combineLatest({
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(({ fullParams, fullChartParams }) => {
+      return renderArrowMarker(defsSelection, fullParams, fullChartParams)
+    })
+  ).subscribe()
+
+  // 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.dotLabel.sizeFixed && 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 renderData$: Observable<RenderData> = observer.visibleComputedData$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return {
+        nodes: data.nodes,
+        edges: data.edges.map(_d => {
+          let d: RenderEdge = _d as RenderEdge
+          d.source = _d.startNode // reference
+          d.target = _d.endNode
+          return d
+        })
+      }
+    }),
+    shareReplay(1)
+  )
+
+  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,
+    })
+
+    nodeCircleSelection = renderNodeCircle({
+      nodeGSelection: nodeGSelection,
+      fullParams: data.fullParams,
+      fullChartParams: data.fullChartParams
+    })
+    nodeGSelection.call(drag(data.simulation, dragStatus$))
+
+    nodeLabelGSelection = renderNodeLabelG({
+      nodeGSelection: nodeGSelection,
+      fullParams: data.fullParams
+    })
+
+    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 - data.fullParams.dot.radius - 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)
+  }
 })