@orbcharts/plugins-basic 3.0.0-alpha.44 → 3.0.0-alpha.46

package/src/base/BaseDots.ts

@@ -11,9 +11,10 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ComputedLayoutDataGrid,
   EventGrid,
   ChartParams, 
-  ContainerPosition,
+  GridContainerPosition,
   Layout,
   TransformData,
   ColorType } from '@orbcharts/core'
@@ -31,8 +32,10 @@ export interface BaseDotsParams {
 interface BaseDotsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  existSeriesLabels$: Observable<string[]>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseDotsParams>
@@ -45,7 +48,7 @@ interface BaseDotsContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   event$: Subject<EventGrid>
 }
 
@@ -62,11 +65,11 @@ type ClipPathDatum = {
 // const circleGClassName = getClassName(pluginName, 'circleG')
 // const circleClassName = getClassName(pluginName, 'circle')
 
-function renderDots ({ graphicGSelection, circleGClassName, circleClassName, data, fullParams, fullChartParams, graphicReverseScale }: {
+function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedLayoutData, fullParams, fullChartParams, graphicReverseScale }: {
   graphicGSelection: d3.Selection<SVGGElement, any, any, any>
   circleGClassName: string
   circleClassName: string
-  data: ComputedDatumGrid[][]
+  visibleComputedLayoutData: ComputedLayoutDataGrid
   fullParams: BaseDotsParams
   fullChartParams: ChartParams
   graphicReverseScale: [number, number][]
@@ -83,7 +86,7 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, dat
     .each((seriesData, seriesIndex, g) => {
       d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>('g')
-        .data(data[seriesIndex], d => d.id)
+        .data(visibleComputedLayoutData[seriesIndex], d => d.id)
         .join(
           enter => {
             // enterDuration
@@ -256,8 +259,10 @@ function renderClipPath ({ defsSelection, clipPathData }: {
 export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string, {
   selection,
   computedData$,
+  computedLayoutData$,
   visibleComputedData$,
-  existSeriesLabels$,
+  visibleComputedLayoutData$,
+  seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -267,7 +272,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   gridGraphicReverseScale$,
   gridAxesSize$,
   gridHighlight$,
-  gridContainer$,
+  gridContainerPosition$,
   event$
 }) => {
 
@@ -282,130 +287,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   //   .attr('clip-path', `url(#${clipPathID})`)
   // const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
   // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
-  const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
-
-  // gridAxesTransform$
-  //   .pipe(
-  //     takeUntil(destroy$),
-  //     map(d => d.value),
-  //     distinctUntilChanged()
-  //   ).subscribe(d => {
-  //     axisSelection
-  //       .style('transform', d)
-  //   })
-
-  // gridGraphicTransform$
-  //   .pipe(
-  //     takeUntil(destroy$),
-  //     switchMap(async d => d.value),
-  //     distinctUntilChanged()
-  //   ).subscribe(d => {
-  //     dataAreaSelection
-  //       .transition()
-  //       .duration(50)
-  //       .style('transform', d)
-  //   })
-
-  // const seriesSelection$ = computedData$.pipe(
-  //   takeUntil(destroy$),
-  //   distinctUntilChanged((a, b) => {
-  //     // 只有當series的數量改變時，才重新計算
-  //     return a.length === b.length
-  //   }),
-  //   map((computedData, i) => {
-  //     return selection
-  //       .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
-  //       .data(computedData, d => d[0] ? d[0].seriesIndex : i)
-  //       .join(
-  //         enter => {
-  //           return enter
-  //             .append('g')
-  //             .classed(seriesClassName, true)
-  //             .each((d, i, g) => {
-  //               const axesSelection = d3.select(g[i])
-  //                 .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
-  //                 .data([i])
-  //                 .join(
-  //                   enter => {
-  //                     return enter
-  //                       .append('g')
-  //                       .classed(axesClassName, true)
-  //                       .attr('clip-path', `url(#${clipPathID})`)
-  //                       .each((d, i, g) => {
-  //                         const defsSelection = d3.select(g[i])
-  //                           .selectAll<SVGDefsElement, any>('defs')
-  //                           .data([i])
-  //                           .join('defs')
-            
-  //                         const graphicGSelection = d3.select(g[i])
-  //                           .selectAll<SVGGElement, any>('g')
-  //                           .data([i])
-  //                           .join('g')
-  //                           .classed(graphicClassName, true)
-  //                       })
-  //                   },
-  //                   update => update,
-  //                   exit => exit.remove()
-  //                 )
-  //             })
-  //         },
-  //         update => update,
-  //         exit => exit.remove()
-  //       )
-  //   })
-  // )
-
-  // combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridContainer: gridContainer$                                                                                                                                                                                       
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   data.seriesSelection
-  //     .transition()
-  //     .attr('transform', (d, i) => {
-  //       const translate = data.gridContainer[i].translate
-  //       const scale = data.gridContainer[i].scale
-  //       return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-  //     })
-  // })
-
-
-  // const axesSelection$ = combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridAxesTransform: gridAxesTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     return data.seriesSelection
-  //       .select<SVGGElement>(`g.${axesClassName}`)
-  //       .style('transform', data.gridAxesTransform.value)
-  //   })
-  // )
-  // const defsSelection$ = axesSelection$.pipe(
-  //   takeUntil(destroy$),
-  //   map(axesSelection => {
-  //     return axesSelection.select<SVGDefsElement>('defs')
-  //   })
-  // )
-  // const graphicGSelection$ = combineLatest({
-  //   axesSelection: axesSelection$,
-  //   gridGraphicTransform: gridGraphicTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     const graphicGSelection = data.axesSelection
-  //       .select<SVGGElement>(`g.${graphicClassName}`)
-  //     graphicGSelection
-  //       .transition()
-  //       .duration(50)
-  //       .style('transform', data.gridGraphicTransform.value)
-  //     return graphicGSelection
-  //   })
-  // )
+  // const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
 
   const { 
     seriesSelection$,
@@ -416,15 +298,15 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     selection,
     pluginName,
     clipPathID,
-    existSeriesLabels$,
-    gridContainer$,
+    seriesLabels$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
 
   const graphicReverseScale$: Observable<[number, number][]> = combineLatest({
     // gridGraphicTransform: gridGraphicTransform$,
-    // gridContainer: gridContainer$,
+    // gridContainerPosition: gridContainerPosition$,
     // gridAxesTransform: gridAxesTransform$
     computedData: computedData$,
     gridGraphicReverseScale: gridGraphicReverseScale$
@@ -457,63 +339,46 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     })
   })
 
-  // const visibleComputedData$ = computedData$.pipe(
-  //   map(computedData => {
-  //     return computedData
-  //       .map(d => {
-  //         return d.filter(_d => _d.visible == true)      
-  //       })
-  //   })
-  // )
-
-  // const SeriesDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridSeriesDataMap(d))
-  // )
-
-  // const GroupDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridGroupDataMap(d))
-  // )
-
-  // const DataMap$ = computedData$.pipe(
-  //   map(d => {
-  //     const DataMap: Map<string, ComputedDatumGrid> = new Map()
-  //     d.flat().forEach(_d => DataMap.set(_d.id, _d))
-  //     return DataMap
-  //   })
-  // )
-
   const highlightTarget$ = fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => d.highlightTarget),
     distinctUntilChanged()
   )
   
-  combineLatest({
+  const graphicSelection$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    computedData: computedData$,
-    visibleComputedData: visibleComputedData$,
-    SeriesDataMap: SeriesDataMap$,
-    GroupDataMap: GroupDataMap$,
+    visibleComputedLayoutData: visibleComputedLayoutData$,
     graphicReverseScale: graphicReverseScale$,
     fullChartParams: fullChartParams$,
     fullParams: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return renderDots({
+        graphicGSelection: data.graphicGSelection,
+        circleGClassName,
+        circleClassName,
+        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams,
+        graphicReverseScale: data.graphicReverseScale
+      })
+    })
+  )
+
+  combineLatest({
+    graphicSelection: graphicSelection$,
+    computedData: computedData$,
+    SeriesDataMap: SeriesDataMap$,
+    GroupDataMap: GroupDataMap$,
     highlightTarget: highlightTarget$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    const graphicSelection = renderDots({
-      graphicGSelection: data.graphicGSelection,
-      circleGClassName,
-      circleClassName,
-      data: data.visibleComputedData,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams,
-      graphicReverseScale: data.graphicReverseScale
-    })
-
-    graphicSelection
+    data.graphicSelection
       .on('mouseover', (event, datum) => {
         event.stopPropagation()
   
@@ -595,8 +460,6 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         })
       })
 
-    graphicSelection$.next(graphicSelection)
-
   })
 
   // const datumList$ = computedData$.pipe(

package/src/base/BaseGroupAxis.ts

@@ -10,7 +10,7 @@ import {
   Observable,
   Subject } from 'rxjs'
 import { createAxisPointScale } from '@orbcharts/core'
-import type { ColorType, ComputedDataGrid, ContainerPosition } from '@orbcharts/core'
+import type { ColorType, ComputedDataGrid, GridContainerPosition } from '@orbcharts/core'
 import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
@@ -51,8 +51,8 @@ interface BaseGroupAxisContext {
     width: number;
     height: number;
   }>
-  gridContainer$: Observable<ContainerPosition[]>
-  isSeriesPositionSeprate$: Observable<boolean>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
+  isSeriesSeprate$: Observable<boolean>
 }
 
 interface TextAlign {
@@ -184,8 +184,8 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   gridAxesTransform$,
   gridAxesReverseTransform$,
   gridAxesSize$,
-  gridContainer$,
-  isSeriesPositionSeprate$,
+  gridContainerPosition$,
+  isSeriesSeprate$,
 }) => {
   
   const destroy$ = new Subject()
@@ -202,12 +202,12 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
         return a.length === b.length
       }),
     ),
-    isSeriesPositionSeprate: isSeriesPositionSeprate$
+    isSeriesSeprate: isSeriesSeprate$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      return data.isSeriesPositionSeprate
+      return data.isSeriesSeprate
         // series分開的時候顯示各別axis
         ? data.computedData
         // series合併的時候只顯示第一個axis
@@ -235,16 +235,16 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
 
   combineLatest({
     containerSelection: containerSelection$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
   ).subscribe(data => {
     data.containerSelection
       .attr('transform', (d, i) => {
-        const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
-        const translate = gridContainer.translate
-        const scale = gridContainer.scale
+        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+        const translate = gridContainerPosition.translate
+        const scale = gridContainerPosition.scale
         return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
       })
       // .attr('opacity', 0)
@@ -326,14 +326,14 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     fullParams: fullParams$,
     fullDataFormatter: fullDataFormatter$,
     gridAxesReverseTransform: gridAxesReverseTransform$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
       const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
       const axisReverseRotateValue = `rotate(${data.gridAxesReverseTransform.rotate}deg) rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
-      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainer[0].scale[0]}, ${1 / data.gridContainer[0].scale[1]})`
+      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
       const tickTextRotateDeg = (data.fullDataFormatter.grid.groupAxis.position === 'left' && data.fullDataFormatter.grid.valueAxis.position === 'top')
         || (data.fullDataFormatter.grid.groupAxis.position === 'right' && data.fullDataFormatter.grid.valueAxis.position === 'bottom')
           ? data.fullParams.tickTextRotate + 180 // 修正文字倒轉

package/src/base/BaseLineAreas.ts

@@ -12,13 +12,14 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ComputedLayoutDatumGrid,
+  ComputedLayoutDataGrid,
   DataFormatterGrid,
   EventGrid,
-  ContainerPosition,
+  GridContainerPosition,
   ChartParams, 
   Layout,
   TransformData } from '@orbcharts/core'
-import { DATA_FORMATTER_VALUE_AXIS } from '@orbcharts/core/src/defaults'
 import { createAxisLinearScale } from '@orbcharts/core'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID, getMinAndMaxValue } from '../utils/orbchartsUtils'
@@ -34,7 +35,10 @@ export interface BaseLineAreasParams {
 interface BaseLineAreasContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  existSeriesLabels$: Observable<string[]>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedData$: Observable<ComputedDatumGrid[][]>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullDataFormatter$: Observable<DataFormatterGrid>
@@ -47,7 +51,7 @@ interface BaseLineAreasContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }
@@ -64,8 +68,8 @@ type ClipPathDatum = {
 // const pathClassName = getClassName(pluginName, 'path')
 
 
-function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: number): d3.Line<ComputedDatumGrid> {
-  return d3.area<ComputedDatumGrid>()
+function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: number): d3.Line<ComputedLayoutDatumGrid> {
+  return d3.area<ComputedLayoutDatumGrid>()
     .x((d) => d.axisX)
     .y0(d => valueAxisStart)
     .y1((d) => d.axisY)
@@ -74,8 +78,8 @@ function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: numb
 }
 
 // 依無值的資料分段
-function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
-  let segmentData: ComputedDatumGrid[][] = [[]]
+function makeSegmentData (data: ComputedLayoutDatumGrid[]): ComputedLayoutDatumGrid[][] {
+  let segmentData: ComputedLayoutDatumGrid[][] = [[]]
 
   let currentIndex = 0
   for (let i in data) {
@@ -97,17 +101,17 @@ function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
 function renderLineAreas ({ selection, pathClassName, segmentData, areaPath, linearGradientIds, params }: {
   selection: d3.Selection<SVGGElement, unknown, any, unknown>
   pathClassName: string
-  segmentData: ComputedDatumGrid[][]
-  areaPath: d3.Line<ComputedDatumGrid>
+  segmentData: ComputedLayoutDatumGrid[][]
+  areaPath: d3.Line<ComputedLayoutDatumGrid>
   linearGradientIds: string[]
   params: BaseLineAreasParams
-}): d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> {
+}): d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any> {
   // if (!data[0]) {
   //   return undefined
   // }
 
   const lineAreas = selection
-    .selectAll<SVGPathElement, ComputedDatumGrid[]>('path')
+    .selectAll<SVGPathElement, ComputedLayoutDatumGrid[]>('path')
     .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
     .join(
       enter => {
@@ -256,7 +260,10 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginName: string, {
   selection,
   computedData$,
-  existSeriesLabels$,
+  computedLayoutData$,
+  visibleComputedData$,
+  visibleComputedLayoutData$,
+  seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -266,7 +273,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
   gridGraphicTransform$,
   gridAxesSize$,
   gridHighlight$,
-  gridContainer$,
+  gridContainerPosition$,
   layout$,
   event$
 }) => {
@@ -285,8 +292,8 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     selection,
     pluginName,
     clipPathID,
-    existSeriesLabels$,
-    gridContainer$,
+    seriesLabels$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
@@ -300,7 +307,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     })
   )
 
-  const areaPath$: Observable<d3.Line<ComputedDatumGrid>> = new Observable(subscriber => {
+  const areaPath$: Observable<d3.Line<ComputedLayoutDatumGrid>> = new Observable(subscriber => {
     const paramsSubscription = combineLatest({
       fullParams: fullParams$,
       valueAxisStart: valueAxisStart$
@@ -316,19 +323,18 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     }
   })
 
-  // 顯示範圍內的series labels
-  const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
-    computedData$.pipe(
-      takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-      const labels = data[0] && data[0][0]
-        ? data.map(d => d[0].seriesLabel)
-        : []
-      subscriber.next(labels)
-    })
-  })
+  // // 顯示範圍內的series labels
+  // const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
+  //   computedData$.pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const labels = data[0] && data[0][0]
+  //       ? data.map(d => d[0].seriesLabel)
+  //       : []
+  //     subscriber.next(labels)
+  //   })
+  // })
 
   // const axisSize$ = gridAxisSizeObservable({
   //   fullDataFormatter$,
@@ -355,7 +361,6 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     transitionEase: transitionEase$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     // 外層的遮罩
@@ -419,54 +424,65 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     }))
   )
   
-  const graphSubscription = combineLatest({
+  const pathSelectionArr$ = combineLatest({
     graphicGSelection: graphicGSelection$,
     defsSelection: defsSelection$,
-    seriesLabels: seriesLabels$,
-    computedData: computedData$,
+    visibleComputedLayoutData: visibleComputedLayoutData$,
     linearGradientIds: linearGradientIds$,
-    SeriesDataMap: SeriesDataMap$,
-    GroupDataMap: GroupDataMap$,
     areaPath: areaPath$,
     params: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      // const updateGraphic = data.graphicGSelection
+      //   .selectAll<SVGGElement, number>('g')
+      //   .data(data.seriesLabels, (d, i) => d)
+      // const enterGraphic = updateGraphic.enter()
+      //   .append('g')
+      //   .classed(graphicClassName, true)
+      // updateGraphic.exit().remove()
+      // const graphicSelection = updateGraphic.merge(enterGraphic)
+      //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
+      let pathSelectionArr: d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any>[] = []
+
+      // 繪圖
+      data.graphicGSelection.each((d, i, all) => {
+        // 將資料分段
+        const segmentData = makeSegmentData(data.visibleComputedLayoutData[i] ?? [])
+
+        pathSelectionArr[i] = renderLineAreas({
+          selection: d3.select(all[i]),
+          pathClassName,
+          areaPath: data.areaPath,
+          segmentData: segmentData,
+          linearGradientIds: data.linearGradientIds,
+          params: data.params
+        })
+        renderLinearGradient({
+          defsSelection: data.defsSelection,
+          computedData: data.visibleComputedLayoutData,
+          linearGradientIds: data.linearGradientIds,
+          params: data.params
+        })
+      })
+
+      return pathSelectionArr
+    })
+  )
+
+  combineLatest({
+    pathSelectionArr: pathSelectionArr$,
+    computedData: computedData$,
+    SeriesDataMap: SeriesDataMap$,
+    GroupDataMap: GroupDataMap$,
     highlightTarget: highlightTarget$,
     gridGroupPositionFn: gridGroupPositionFn$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
-
-    // const updateGraphic = data.graphicGSelection
-    //   .selectAll<SVGGElement, number>('g')
-    //   .data(data.seriesLabels, (d, i) => d)
-    // const enterGraphic = updateGraphic.enter()
-    //   .append('g')
-    //   .classed(graphicClassName, true)
-    // updateGraphic.exit().remove()
-    // const graphicSelection = updateGraphic.merge(enterGraphic)
-    //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
-
-    // 繪圖
-    data.graphicGSelection.each((d, i, all) => {
-      // 將資料分段
-      const segmentData = makeSegmentData(data.computedData[i] ?? [])
-
-      const pathSelection = renderLineAreas({
-        selection: d3.select(all[i]),
-        pathClassName,
-        areaPath: data.areaPath,
-        segmentData: segmentData,
-        linearGradientIds: data.linearGradientIds,
-        params: data.params
-      })
-      renderLinearGradient({
-        defsSelection: data.defsSelection,
-        computedData: data.computedData,
-        linearGradientIds: data.linearGradientIds,
-        params: data.params
-      })
-
+    data.pathSelectionArr.forEach(pathSelection => {
       pathSelection
         .on('mouseover', (event, datum) => {
           event.stopPropagation()
@@ -570,21 +586,9 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             groupLabel: _datum.groupLabel,
             event,
             data: data.computedData
-          })
         })
-
+      })
     })
-
-    
-
-    // graphicSelection$.next(graphicSelection)
-
-
-    // pathSelection = renderLineAreas({
-    //   selection: graphicSelection,
-    //   areaPath: d.areaPath,
-    //   data: d.computedData
-    // })
   })
 
   // const datumList$ = computedData$.pipe(