@orbcharts/plugins-basic 3.0.0-alpha.64 → 3.0.0-alpha.65

package/src/series/plugins/RoseLabels.ts

@@ -27,24 +27,38 @@ import { seriesCenterSelectionObservable } from '../seriesObservables'
 interface RenderDatum {
   pieDatum: PieDatum
   arcIndex: number
-  arcLabel: string
+  arcLabels: string[]
+  lineStartX: number
+  lineStartY: number
+  lineStartMouseoverX: number
+  lineStartMouseoverY: number
   x: number
   y: number
   mouseoverX: number
   mouseoverY: number
+  textWidth: number, // 文字寬度
+  collisionShiftX: number // 避免碰撞的位移
+  collisionShiftY: number
+  quadrant: number // 第幾象限
 }
 
 const pluginName = 'RoseLabels'
+const labelGClassName = getClassName(pluginName, 'label-g')
+const lineGClassName = getClassName(pluginName, 'line-g')
 const textClassName = getClassName(pluginName, 'text')
 
-function makeRenderData ({ pieData, centroid, arcScaleType, maxValue, axisWidth, outerRadius }: {
+const pieOuterCentroid = 2
+
+function makeRenderData ({ pieData, labelCentroid, arcScaleType, maxValue, axisWidth, outerRadius, lineStartCentroid, fullParams }: {
   pieData: PieDatum[]
   // arc: d3.Arc<any, d3.DefaultArcObject>
-  centroid: number
+  labelCentroid: number
   arcScaleType: 'area' | 'radius'
   maxValue: number
   axisWidth: number
   outerRadius: number
+  lineStartCentroid: number
+  fullParams: RoseLabelsParams
 }): RenderDatum[] {
 
   const outerRadiusWidth = (axisWidth / 2) * outerRadius
@@ -71,118 +85,286 @@ function makeRenderData ({ pieData, centroid, arcScaleType, maxValue, axisWidth,
 
       const [_x, _y] = arc!.centroid(d as any)
       const [_mouseoverX, _mouseoverY] = [_x, _y]
+      const arcLabel = fullParams.labelFn(d.data)
       return {
         pieDatum: d,
         arcIndex: i,
-        arcLabel: d.data.label,
-        x: _x * centroid!,
-        y: _y * centroid!,
-        mouseoverX: _mouseoverX * centroid!,
-        mouseoverY: _mouseoverY * centroid!
+        arcLabels: arcLabel.split('\n'),
+        lineStartX: _x * lineStartCentroid,
+        lineStartY: _y * lineStartCentroid,
+        lineStartMouseoverX: _mouseoverX * lineStartCentroid,
+        lineStartMouseoverY: _mouseoverY * lineStartCentroid,
+        x: _x * labelCentroid!,
+        y: _y * labelCentroid!,
+        mouseoverX: _mouseoverX * labelCentroid!,
+        mouseoverY: _mouseoverY * labelCentroid!,
+        textWidth: 0, // 後面再做計算
+        collisionShiftX: 0, // 後面再做計算
+        collisionShiftY: 0, // 後面再做計算
+        quadrant: _x >= 0 && _y <= 0
+          ? 1
+          : _x < 0 && _y <= 0
+            ? 2
+            : _x < 0 && _y > 0
+              ? 3
+              : 4
       }
     })
     .filter(d => d.pieDatum.data.visible)
 }
 
 // 繪製圓餅圖
-function renderLabel (selection: d3.Selection<SVGGElement, undefined, any, any>, data: RenderDatum[], pluginParams: RoseLabelsParams, fullChartParams: ChartParams) {
+function renderLabel ({ labelGSelection, data, fullParams, fullChartParams, textSizePx }: {
+  labelGSelection: d3.Selection<SVGGElement, undefined, any, any>
+  data: RenderDatum[]
+  fullParams: RoseLabelsParams
+  fullChartParams: ChartParams
+  textSizePx: number
+}) {
   // console.log(data)
   // let update = this.gSelection.selectAll('g').data(pieData)
-  let update: d3.Selection<SVGPathElement, RenderDatum, any, any> = selection
-    .selectAll<SVGPathElement, RenderDatum>('text')
+  const textSelection = labelGSelection
+    .selectAll<SVGTextElement, RenderDatum>('text')
     .data(data, d => d.pieDatum.id)
-  let enter = update.enter()
-    .append<SVGPathElement>('text')
+    .join('text')
     .classed(textClassName, true)
-  let exit = update.exit()
-
-  enter
-    .append('text')
-    
-  const labelSelection = update.merge(enter)
-  labelSelection
     .attr('font-weight', 'bold')
-    .attr('text-anchor', 'middle')
-    .style('dominant-baseline', 'middle')
+    .attr('text-anchor', d => d.quadrant == 1 || d.quadrant == 4 ? 'start' : 'end')
+    .style('dominant-baseline', d => d.quadrant == 1 || d.quadrant == 2 ? 'auto' : 'hanging')
     // .style('pointer-events', 'none')
     .style('cursor', d => fullChartParams.highlightTarget && fullChartParams.highlightTarget != 'none'
       ? 'pointer'
       : 'none')
     // .text((d, i) => d.arcLabel)
-    .text(d => pluginParams.labelFn(d.pieDatum.data))
+    // .text(d => fullParams.labelFn(d.pieDatum.data))
     .attr('font-size', fullChartParams.styles.textSize)
-    .attr('fill', (d, i) => getDatumColor({ datum: d.pieDatum.data, colorType: pluginParams.labelColorType, fullChartParams }))
+    .attr('fill', (d, i) => getDatumColor({ datum: d.pieDatum.data, colorType: fullParams.labelColorType, fullChartParams }))
+    .each((d, i, n) => {
+      const textNode = d3.select<SVGTextElement, RenderDatum>(n[i])
+        .selectAll('tspan')
+        .data(d.arcLabels)
+        .join('tspan')
+        .attr('x', 0)
+        .attr('y', (_d, _i) => d.quadrant == 1 || d.quadrant == 2
+          ? - (d.arcLabels.length - 1 - _i) * textSizePx
+          : _i * textSizePx)
+        .text(d => d)
+    })
+  textSelection
     .transition()
     .attr('transform', (d) => {
       return 'translate(' + d.x + ',' + d.y + ')'
     })
     // .on('end', () => initHighlight({ labelSelection, data, fullChartParams }))
-  exit.remove()
 
   // 如無新增資料則不用等動畫
   // if (enter.size() == 0) {
   //   this.initHighlight()
   // }
 
-  return labelSelection
+  return textSelection
 }
 
-// function initHighlight ({ labelSelection, data, fullChartParams }: {
-//   labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any>)
-//   data: RenderDatum[]
-//   fullChartParams: ChartParams
-// }) {
-//   removeHighlight({ labelSelection })
-//   // if (fullParams.highlightSeriesId || fullParams.highlightDatumId) {
-//     highlight({
-//       labelSelection,
-//       data,
-//       id: fullChartParams.highlightDefault,
-//       label: fullChartParams.highlightDefault,
-//       fullChartParams
-//     })
-//   // }
-// }
-
-function highlight ({ labelSelection, ids, fullChartParams }: {
-  labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any>)
+// 獲取每個文字元素的邊界框並檢查是否重疊
+function resolveCollisions(textSelection: d3.Selection<SVGTextElement, RenderDatum, any, any>, data: RenderDatum[], textSizePx: number) {
+  const textArray = textSelection.nodes();
+  const padding = textSizePx  // 調整文字間的間距
+  
+  // 存儲每個標籤的當前位置
+  const positions = textArray.map((textNode, i) => {
+    const bbox = textNode.getBBox();
+    // const arcCentroid = arc.centroid(data[i]);
+    const arcCentroid = [data[i].x, data[i].y];
+    return { 
+      node: textNode, 
+      x: arcCentroid[0], 
+      y: arcCentroid[1], 
+      width: bbox.width, 
+      height: bbox.height
+    }
+  })
+
+  // 順時針碰撞檢測（只處理 2、4 象限，將較後面的文字碰撞時往外偏移）
+  for (let i = 0; i < positions.length; i++) {
+    const a = positions[i]
+
+    for (let j = i + 1; j < positions.length; j++) {
+      const b = positions[j]
+
+      // 記錄文字寬度
+      data[i].textWidth = a.width
+
+      const ax = a.x + data[i].collisionShiftX
+      const ay = a.y + data[i].collisionShiftY
+      const bx = b.x + data[j].collisionShiftX
+      const by = b.y + data[j].collisionShiftY
+
+      // 檢查是否重疊
+      if (!(ax + a.width / 2 < bx - b.width / 2 || 
+            ax - a.width / 2 > bx + b.width / 2 || 
+            ay + a.height / 2 < by - b.height / 2 || 
+            ay - a.height / 2 > by + b.height / 2)) {
+
+        if (data[j].quadrant == 2) {
+          const moveDown = (by > ay)
+            ? -padding * 2
+            : -padding
+          data[j].collisionShiftY += moveDown // 由後一個累加高度
+        } else if (data[j].quadrant == 4) {
+          const moveDown = (by > ay)
+            ? padding
+            : padding * 2
+          data[j].collisionShiftY += moveDown // 由後一個累加高度
+        }
+      }
+    }
+  }
+
+  // 逆時針碰撞檢測（只處理 1、3 象限，將較前面的文字碰撞時往外偏移）
+  for (let i = positions.length - 1; i >= 0; i--) {
+    const a = positions[i]
+    
+    for (let j = i - 1; j >= 0; j--) {
+      const b = positions[j]
+
+      // 記錄文字寬度
+      data[i].textWidth = a.width
+
+      const ax = a.x + data[i].collisionShiftX
+      const ay = a.y + data[i].collisionShiftY
+      const bx = b.x + data[j].collisionShiftX
+      const by = b.y + data[j].collisionShiftY
+
+      // 檢查是否重疊
+      if (!(ax + a.width / 2 < bx - b.width / 2 || 
+            ax - a.width / 2 > bx + b.width / 2 || 
+            ay + a.height / 2 < by - b.height / 2 || 
+            ay - a.height / 2 > by + b.height / 2)) {
+
+        if (data[j].quadrant == 1) {
+          const moveDown = (by > ay)
+            ? -padding * 2
+            : -padding
+          data[j].collisionShiftY += moveDown // 由前一個累加高度
+        } else if (data[j].quadrant == 3) {
+          const moveDown = (by > ay)
+            ? padding
+            : padding * 2
+          data[j].collisionShiftY += moveDown // 由前一個累加高度
+        }
+      }
+    }
+  }
+
+  // 全部算完再來 render
+  textSelection
+    .data(data)
+    .transition()
+    .attr('transform', (d) => {
+      return `translate(${d.x + d.collisionShiftX},${d.y + d.collisionShiftY})`
+    })
+}
+
+function renderLine ({ lineGSelection, data, fullParams, fullChartParams }: {
+  lineGSelection: d3.Selection<SVGGElement, undefined, any, any>
+  data: RenderDatum[]
+  fullParams: RoseLabelsParams
+  fullChartParams: ChartParams
+}) {
+  
+  // 只顯示在有偏移的標籤
+  const filteredData = data.filter(d => d.collisionShiftX || d.collisionShiftY)
+
+  // 添加標籤的連接線
+  const lines = lineGSelection.selectAll<SVGPolylineElement, RenderDatum>("polyline")
+    .data(filteredData, d => d.pieDatum.id)
+    .join("polyline")
+    .attr("stroke", d => getDatumColor({ datum: d.pieDatum.data, colorType: fullParams.labelColorType, fullChartParams }))
+    .attr("stroke-width", 1)
+    .attr("fill", "none")
+    .attr("points", (d) => {
+      return [[d.lineStartX, d.lineStartY], [d.lineStartX, d.lineStartY]] as any // 畫出從弧線中心到延伸點的線
+    })
+  lines
+    .transition()
+    .attr("points", (d) => {
+      // const pos = arc.centroid(d)  // 起點：弧線的中心點
+      // const outerPos = [pos[0] * 2.5, pos[1] * 2.5]  // 外部延伸的點（乘以倍率來延長線段）
+
+      let lineEndX = d.x + d.collisionShiftX
+      let lineEndY = d.y + d.collisionShiftY
+      // if (d.lineStartX >= Math.abs(d.lineStartY)) {
+      //   lineEndX -= d.textWidth / 2
+      // } else if (d.lineStartX <= - Math.abs(d.lineStartY)) {
+      //   lineEndX += d.textWidth / 2
+      // }
+
+      return [[lineEndX, lineEndY], [d.lineStartX, d.lineStartY]] as any // 畫出從弧線中心到延伸點的線
+    })
+  
+  return lines
+}
+
+function highlight ({ textSelection, lineSelection, ids, fullChartParams }: {
+  textSelection: d3.Selection<SVGTextElement, RenderDatum, any, any>
+  lineSelection: d3.Selection<SVGPolylineElement, RenderDatum, any, any>
   ids: string[]
   fullChartParams: ChartParams
 }) {
-  labelSelection.interrupt('highlight')
+  textSelection.interrupt('highlight')
+  lineSelection.interrupt('highlight')
   
   if (!ids.length) {
-    labelSelection
-      .transition()
+    textSelection
+      .transition('highlight')
       .duration(200)
       .attr('transform', (d) => {
-        return 'translate(' + d.x + ',' + d.y + ')'
+        return `translate(${d.x + d.collisionShiftX},${d.y + d.collisionShiftY})`
       })
       .style('opacity', 1)
+    lineSelection
+      .transition('highlight')
+      .duration(200)
+      .style('opacity', 1)
     return
   }
 
-  labelSelection.each((d, i, n) => {
-    const segment = d3.select<SVGPathElement, RenderDatum>(n[i])
+  textSelection.each((d, i, n) => {
+    const segment = d3.select<SVGTextElement, RenderDatum>(n[i])
 
     if (ids.includes(d.pieDatum.data.id)) {
       segment
         .style('opacity', 1)
-        .transition()
+        .transition('highlight')
         .duration(200)
         .attr('transform', (d) => {
-          return 'translate(' + d.mouseoverX + ',' + d.mouseoverY + ')'
+          return `translate(${d.mouseoverX + d.collisionShiftX},${d.mouseoverY + d.collisionShiftY})`
         })
     } else {
       segment
         .style('opacity', fullChartParams.styles.unhighlightedOpacity)
-        .transition()
+        .transition('highlight')
         .duration(200)
         .attr('transform', (d) => {
-          return 'translate(' + d.x + ',' + d.y + ')'
+          return `translate(${d.x + d.collisionShiftX},${d.y + d.collisionShiftY})`
         })
     }
   })
+  lineSelection.each((d, i, n) => {
+    const segment = d3.select<SVGPolylineElement, RenderDatum>(n[i])
+
+    if (ids.includes(d.pieDatum.data.id)) {
+      segment
+        .style('opacity', 1)
+        .transition('highlight')
+        .duration(200)
+    } else {
+      segment
+        .style('opacity', fullChartParams.styles.unhighlightedOpacity)
+        .transition('highlight')
+        .duration(200)
+    }
+  })
 }
 
 
@@ -194,13 +376,22 @@ function createEachPieLabel (pluginName: string, context: {
   // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<RoseLabelsParams>
   fullChartParams$: Observable<ChartParams>
+  textSizePx$: Observable<number>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
   seriesContainerPosition$: Observable<SeriesContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()
 
-  let labelSelection$: Subject<d3.Selection<SVGPathElement, RenderDatum, any, any>> = new Subject()
+  context.containerSelection.selectAll('g').remove()
+
+  const lineGSelection: d3.Selection<SVGGElement, any, any, unknown> = context.containerSelection.append('g')
+  lineGSelection.classed(lineGClassName, true)
+  const labelGSelection: d3.Selection<SVGGElement, any, any, unknown> = context.containerSelection.append('g')
+  labelGSelection.classed(labelGClassName, true)
+
+  const textSelection$: Subject<d3.Selection<SVGTextElement, RenderDatum, any, any>> = new Subject()
+  const lineSelection$: Subject<d3.Selection<SVGPolylineElement, RenderDatum, any, any>> = new Subject()
   let renderData: RenderDatum[] = []
   
   const shorterSideWith$ = context.seriesContainerPosition$.pipe(
@@ -214,6 +405,16 @@ function createEachPieLabel (pluginName: string, context: {
     distinctUntilChanged()
   )
 
+  const lineStartCentroid$ = context.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      return d.labelCentroid >= pieOuterCentroid
+        ? pieOuterCentroid // 當 label在 pie的外側時，線條從 pie的邊緣開始
+        : d.labelCentroid // 當 label在 pie的內側時，線條從 label未偏移前的位置開始
+
+    })
+  )
+
   combineLatest({
     // layout: context.seriesContainerPosition$,
     shorterSideWith: shorterSideWith$,
@@ -221,36 +422,13 @@ function createEachPieLabel (pluginName: string, context: {
     maxValue: maxValue$,
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$,
+    textSizePx: context.textSizePx$,
+    lineStartCentroid: lineStartCentroid$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    // const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
-
-    // // 弧產生器 (d3.arc())
-    // const arc = makeD3Arc({
-    //   axisWidth: shorterSideWith,
-    //   innerRadius: 0,
-    //   outerRadius: data.fullParams.outerRadius,
-    //   padAngle: 0,
-    //   cornerRadius: 0
-    // })
-
-    // const arcMouseover = makeD3Arc({
-    //   axisWidth: shorterSideWith,
-    //   innerRadius: 0,
-    //   outerRadius: data.fullParams.outerRadiusWhileHighlight, // 外半徑變化
-    //   padAngle: 0,
-    //   cornerRadius: 0
-    // })
-
-    // const pieData = makePieData({
-    //   data: data.containerVisibleComputedLayoutData,
-    //   startAngle: data.fullParams.startAngle,
-    //   endAngle: data.fullParams.endAngle
-    // })
-
     const eachAngle = Math.PI * 2 / data.containerVisibleComputedLayoutData.length
 
     const pieData = data.containerVisibleComputedLayoutData.map((d, i) => {
@@ -268,21 +446,44 @@ function createEachPieLabel (pluginName: string, context: {
 
     renderData = makeRenderData({
       pieData,
-      centroid: data.fullParams.labelCentroid,
+      labelCentroid: data.fullParams.labelCentroid,
       arcScaleType: data.fullParams.arcScaleType,
       maxValue: data.maxValue,
       axisWidth: data.shorterSideWith,
-      outerRadius: data.fullParams.outerRadius
+      outerRadius: data.fullParams.outerRadius,
+      lineStartCentroid: data.lineStartCentroid,
+      fullParams: data.fullParams
     })
 
-    const labelSelection = renderLabel(context.containerSelection, renderData, data.fullParams, data.fullChartParams)
+    // 先移除線條，等偏移後再重新繪製
+    lineGSelection.selectAll('polyline').remove()
 
-    labelSelection$.next(labelSelection)
+    const textSelection = renderLabel({
+      labelGSelection,
+      data: renderData,
+      fullParams: data.fullParams,
+      fullChartParams: data.fullChartParams,
+      textSizePx: data.textSizePx
+    })
+
+    // 等 label 本身的 transition 結束後再進行碰撞檢測
+    setTimeout(() => {
+      // 偏移 label
+      resolveCollisions(textSelection, renderData, data.textSizePx)
+
+      const lineSelection = renderLine({ lineGSelection, data: renderData, fullParams: data.fullParams, fullChartParams: data.fullChartParams })
 
+      lineSelection$.next(lineSelection)
+
+    }, 1000)
+
+    textSelection$.next(textSelection)
+    
   })
   
   combineLatest({
-    labelSelection: labelSelection$,
+    textSelection: textSelection$,
+    lineSelection: lineSelection$,
     highlight: context.seriesHighlight$.pipe(
       map(data => data.map(d => d.id))
     ),
@@ -292,7 +493,8 @@ function createEachPieLabel (pluginName: string, context: {
     switchMap(async d => d)
   ).subscribe(data => {
     highlight({
-      labelSelection: data.labelSelection,
+      textSelection: data.textSelection,
+      lineSelection: data.lineSelection,
       ids: data.highlight,
       fullChartParams: data.fullChartParams,
     })
@@ -348,6 +550,7 @@ export const RoseLabels = defineSeriesPlugin(pluginName, DEFAULT_ROSE_LABELS_PAR
           // SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
+          textSizePx$: observer.textSizePx$,
           seriesHighlight$: observer.seriesHighlight$,
           seriesContainerPosition$: containerPosition$,
           event$: subject.event$,

package/src/series/types.ts

@@ -20,14 +20,16 @@ export interface BubblesParams {
 
 export interface PieParams {
   // padding: Padding
-  outerRadius: number;
-  innerRadius: number;
-  outerRadiusWhileHighlight: number;
+  outerRadius: number
+  innerRadius: number
+  outerRadiusWhileHighlight: number
   // label?: LabelStyle
   // enterDuration: number
   startAngle: number
   endAngle: number
   padAngle: number
+  strokeColorType: ColorType
+  strokeWidth: number
   // padRadius: number
   cornerRadius: number
 }
@@ -55,10 +57,12 @@ export interface PieLabelsParams {
 
 export interface RoseParams {
   outerRadius: number
-  // padAngle: number
+  padAngle: number
+  strokeColorType: ColorType
+  strokeWidth: number
   cornerRadius: number
   arcScaleType: ArcScaleType
-  mouseoverAngleIncrease: number
+  angleIncreaseWhileHighlight: number
 }
 
 export interface RoseLabelsParams {