@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.45

package/src/multiGrid/plugins/MultiLines.ts

@@ -6,7 +6,7 @@ import {
 
 import { DEFAULT_MULTI_LINES_PARAMS } from '../defaults'
 import { createBaseLines } from '../../base/BaseLines'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiLines'
@@ -18,7 +18,7 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
   
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -34,18 +34,21 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
 
         unsubscribeFnArr[i] = createBaseLines(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
+          computedData$: d.computedData$,
+          computedLayoutData$: d.computedLayoutData$,
+          visibleComputedData$: d.visibleComputedData$,
+          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+          seriesLabels$: d.seriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,
           gridAxesTransform$: d.gridAxesTransform$,
           gridGraphicTransform$: d.gridGraphicTransform$,
           gridAxesSize$: d.gridAxesSize$,
           gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
+          gridContainerPosition$: d.gridContainerPosition$,
           event$: subject.event$ as Subject<any>,
         })
       })

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -1,11 +1,16 @@
 import * as d3 from 'd3'
 import {
-  Subject } from 'rxjs'
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_MULTI_VALUE_AXIS_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 const pluginName = 'MultiValueAxis'
@@ -17,7 +22,7 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  const multiGridPlugin$ = multiGridDetailObservables(observer)
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
 
   multiGridPlugin$.subscribe(data => {
     // 每次重新計算時，清除之前的訂閱
@@ -31,17 +36,24 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -5,18 +5,19 @@ import {
   switchMap,
   combineLatest,
   takeUntil,
+  distinctUntilChanged,
+  shareReplay,
   iif,
   Observable,
   Subject } from 'rxjs'
-import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
+import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '@orbcharts/core'
 import {
   defineMultiGridPlugin } from '@orbcharts/core'
 import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
-import { multiGridDetailObservables } from '../multiGridObservables'
+import { multiGridPluginObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-// @Q@
-import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
+import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
 
 const pluginName = 'OverlappingValueAxes'
 
@@ -40,43 +41,41 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
   // 為了要反轉第二個valueAxis的位置所以要重新計算
   const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
     firstGridIndex: firstGridIndex$,
-    secondGridIndex: secondGridIndex$
+    secondGridIndex: secondGridIndex$,
+    fullDataFormatter: observer.fullDataFormatter$,
   }).pipe(
     takeUntil(destroy$),
-    switchMap(data => {
-      return observer.fullDataFormatter$.pipe(
-        takeUntil(destroy$),
-        map(fullDataFormatter => {
-          if (!fullDataFormatter.gridList[data.secondGridIndex]) {
-            fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
-          }
-          // 反轉第二個valueAxis的位置
-          let reversePosition = ''
-          if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
-            reversePosition = 'right'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
-            reversePosition = 'top'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
-            reversePosition = 'bottom'
-          } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
-            reversePosition = 'left'
-          }
-          return <DataFormatterGrid>{
-            type: 'grid',
-            grid: {
-              ...fullDataFormatter.gridList[data.secondGridIndex],
-              valueAxis: {
-                ...fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
-                position: reversePosition
-              }
-            },
-            container: {
-              ...fullDataFormatter.container
-            }
+    switchMap(async (d) => d),
+    map(data => {
+      if (!data.fullDataFormatter.gridList[data.secondGridIndex]) {
+        data.fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, data.fullDataFormatter.gridList[data.firstGridIndex])
+      }
+      // 反轉第二個valueAxis的位置
+      let reversePosition = ''
+      if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
+        reversePosition = 'right'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
+        reversePosition = 'top'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
+        reversePosition = 'bottom'
+      } else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
+        reversePosition = 'left'
+      }
+      return <DataFormatterGrid>{
+        type: 'grid',
+        visibleFilter: data.fullDataFormatter.visibleFilter as any,
+        grid: {
+          ...data.fullDataFormatter.gridList[data.secondGridIndex],
+          valueAxis: {
+            ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
+            position: reversePosition
           }
-        })
-      )
-    }),
+        },
+        container: {
+          ...data.fullDataFormatter.container
+        }
+      }
+    })
   )
 
   const multiGridPlugin$ = of(observer).pipe(
@@ -95,7 +94,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         )
       }
     }),
-    switchMap(observer => multiGridDetailObservables(observer)),
+    switchMap(observer => multiGridPluginObservables(observer)),
     map(data => {
       return data.map((observables, index) => {
         if (index === 0) {
@@ -109,17 +108,16 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
         const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
           gridAxesTransform$
         })
-        const gridContainer$ = gridContainerObservable({
-          computedData$: observables.gridComputedData$,
+        const gridContainerPosition$ = gridContainerPositionObservable({
+          computedData$: observables.computedData$,
           fullDataFormatter$: secondGridDataFormatter$,
-          fullChartParams$: observer.fullChartParams$,
           layout$: observer.layout$
         })
         return {
           ...observables,
           gridAxesTransform$,
           gridAxesReverseTransform$,
-          gridContainer$,
+          gridContainerPosition$,
         }
       })
     })
@@ -140,19 +138,26 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
 
         const gridSelection = d3.select(g[i])
 
+        const isSeriesSeprate$ = d.dataFormatter$.pipe(
+          takeUntil(destroy$),
+          map(d => d.grid.separateSeries),
+          distinctUntilChanged(),
+          shareReplay(1)
+        )
+
         unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
           selection: gridSelection,
-          computedData$: d.gridComputedData$,
+          computedData$: d.computedData$,
           fullParams$: observer.fullParams$.pipe(
             map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
           ),
-          fullDataFormatter$: d.gridDataFormatter$,
+          fullDataFormatter$: d.dataFormatter$,
           fullChartParams$: observer.fullChartParams$,  
           gridAxesTransform$: d.gridAxesTransform$,
           gridAxesReverseTransform$: d.gridAxesReverseTransform$,
           gridAxesSize$: d.gridAxesSize$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          gridContainerPosition$: d.gridContainerPosition$,
+          isSeriesSeprate$,
         })
       })
   })

package/src/noneData/defaults.ts

@@ -27,6 +27,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'series') {
       const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
       const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })
@@ -37,6 +38,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'group') {
       const label = (eventData as EventBaseGridValue<any, any>).groupLabel
       const valueArr = (eventData as EventBaseGridValue<any, any>).series
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })
@@ -47,6 +49,7 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     } else if (eventData.highlightTarget === 'category') {
       const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
       const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
+        .filter(d => d.visible == true)
         .map(d => {
           return d.value
         })

package/src/noneData/plugins/Tooltip.ts

@@ -17,6 +17,7 @@ import { defineNoneDataPlugin } from '@orbcharts/core'
 import { getSvgGElementSize, appendSvg } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
 import { TOOLTIP_PARAMS } from '../defaults'
+import { textSizePxObservable } from '@orbcharts/core'
 
 interface TooltipStyle {
   backgroundColor: string
@@ -25,7 +26,8 @@ interface TooltipStyle {
   offset: [number, number]
   padding: number
   textColor: string
-  textSize: number
+  textSize: number | string // chartParams上的設定
+  textSizePx: number
 }
 
 const pluginName = 'Tooltip'
@@ -33,7 +35,7 @@ const gClassName = getClassName(pluginName, 'g')
 const boxClassName = getClassName(pluginName, 'box')
 
 function textToSvg (textArr: string[], textStyle: TooltipStyle) {
-  const lineHeight = textStyle.textSize * 1.5
+  const lineHeight = textStyle.textSizePx * 1.5
   return textArr
     .filter(d => d != '')
     .map((text, i) => {
@@ -203,9 +205,12 @@ export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin
     // map(d => d as EventTypeMap<typeof chartType>)
   )
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$)
+
   const tooltipStyle$: Observable<TooltipStyle> = combineLatest({
     fullChartParams: observer.fullChartParams$,
-    fullParams: observer.fullParams$
+    fullParams: observer.fullParams$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -217,6 +222,7 @@ export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin
         offset: data.fullParams.offset,
         padding: data.fullParams.padding,
         textSize: data.fullChartParams.styles.textSize,
+        textSizePx: data.textSizePx,
         textColor: getColor(data.fullParams.textColorType, data.fullChartParams),
       }
     })

package/src/series/defaults.ts

@@ -45,11 +45,21 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
 }
 
 export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
-  eventFn: (d: EventSeries, eventName: EventName, t: number) => {
+  eventFn: (eventData: EventSeries, eventName: EventName, t: number) => {
     if (eventName === 'mouseover' || eventName === 'mousemove') {
-      return [String(d.datum!.value)]
+      return [String(eventData.datum!.value)]
     }
-    return [String(Math.round(d.data.reduce((previous,current)=>previous+(current.value??0),0)*t))]
+    return [
+      String(
+        Math.round(
+          eventData.data.reduce((acc, seriesData) => {
+            return acc + seriesData.reduce((_acc, data) => {
+              return _acc + (data.value ?? 0)
+            }, 0)
+          }, 0) * t
+        )
+      )
+    ]
   },
   textAttrs: [
     {

package/src/series/plugins/Bubbles.ts

@@ -14,7 +14,8 @@ import type {
   DataSeries,
   EventName,
   ComputedDataSeries,
-  ComputedDatumSeries } from '@orbcharts/core'
+  ComputedDatumSeries,
+  SeriesContainerPosition } from '@orbcharts/core'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
 import type { BubblesParams, BubbleScaleType } from '../types'
@@ -28,6 +29,8 @@ interface BubblesDatum extends ComputedDatumSeries {
   _originR: number // 紀錄變化前的r
 }
 
+type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
+
 let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
 function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
@@ -81,11 +84,12 @@ function getMaxR ({ data, bubbleGroupR, maxValue, avgValue }: {
   return maxR * modifier
 }
 
-function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, scaleType }: {
+function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeight, SeriesContainerPositionMap, scaleType }: {
   data: ComputedDataSeries
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
+  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
   scaleType: BubbleScaleType
   // highlightIds: string[]
 }) {
@@ -124,8 +128,9 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
       d.x = existDatum.x
       d.y = existDatum.y
     } else {
-      d.x = Math.random() * graphicWidth
-      d.y = Math.random() * graphicHeight
+      const seriesContainerPosition = SeriesContainerPositionMap.get(d.seriesLabel)!
+      d.x = Math.random() * seriesContainerPosition.width
+      d.y = Math.random() * seriesContainerPosition.height
     }
     const r = scaleBubbleR!(d.value ?? 0)!
     d.r = r
@@ -148,7 +153,7 @@ function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
     .append<SVGGElement>("g")
     .attr('cursor', 'pointer')
   enter
-    .style('font-size', 12)
+    .attr('font-size', 12)
     .style('fill', '#ffffff')
     .attr("text-anchor", "middle")
     .attr("transform", (d) => {
@@ -253,16 +258,22 @@ function drag (): d3.DragBehavior<Element, unknown, unknown> {
 //   return typeCenter ? typeCenter.x : 0
 // }
 
-function groupBubbles ({ fullParams, graphicWidth, graphicHeight }: {
+function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
   fullParams: BubblesParams
-  graphicWidth: number
-  graphicHeight: number
+  // graphicWidth: number
+  // graphicHeight: number
+  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
 }) {
+  // console.log('groupBubbles')
   force!
     // .force('x', d3.forceX().strength(fullParams.force.strength).x(graphicWidth / 2))
     // .force('y', d3.forceY().strength(fullParams.force.strength).y(graphicHeight / 2))
-    .force('x', d3.forceX().strength(fullParams.force.strength).x(0))
-    .force('y', d3.forceY().strength(fullParams.force.strength).y(0))
+    .force('x', d3.forceX().strength(fullParams.force.strength).x((data: BubblesSimulationDatum) => {
+      return SeriesContainerPositionMap.get(data.seriesLabel)!.centerX
+    }))
+    .force('y', d3.forceY().strength(fullParams.force.strength).y((data: BubblesSimulationDatum) => {
+      return SeriesContainerPositionMap.get(data.seriesLabel)!.centerY
+    }))
 
   force!.alpha(1).restart();
 }
@@ -312,23 +323,27 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   //   force = makeForce(bubblesSelection, d)
   // })
 
-  observer.layout$
-    .pipe(
-      first()
-    )
-    .subscribe(size => {
-      selection
-        .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-      observer.layout$
-        .pipe(
-          takeUntil(destroy$)
-        )
-        .subscribe(size => {
-          selection
-            .transition()
-            .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
-        })
-    })
+  // observer.seriesContainerPosition$.subscribe(d => {
+  //   console.log(d)
+  // })
+
+  // observer.layout$
+  //   .pipe(
+  //     first()
+  //   )
+  //   .subscribe(size => {
+  //     selection
+  //       .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //     observer.layout$
+  //       .pipe(
+  //         takeUntil(destroy$)
+  //       )
+  //       .subscribe(size => {
+  //         selection
+  //           .transition()
+  //           .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+  //       })
+  //   })
 
   // const bubbleGroupR$ = layout$.pipe(
   //   map(d => {
@@ -370,18 +385,20 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   const bubblesData$ = new Observable<BubblesDatum[]>(subscriber => {
     combineLatest({
       layout: observer.layout$,
-      computedData: observer.computedData$,
+      SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
+      visibleComputedLayoutData: observer.visibleComputedLayoutData$,
       scaleType: scaleType$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
+      // console.log(data.visibleComputedLayoutData)
       const bubblesData = createBubblesData({
-        data: data.computedData,
+        data: data.visibleComputedLayoutData,
         LastBubbleDataMap,
         graphicWidth: data.layout.width,
         graphicHeight: data.layout.height,
+        SeriesContainerPositionMap: data.SeriesContainerPositionMap,
         scaleType: data.scaleType
       })
       subscriber.next(bubblesData)
@@ -405,12 +422,12 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
     bubblesData: bubblesData$,
     SeriesDataMap: observer.SeriesDataMap$,
     fullParams: observer.fullParams$,
-    highlightTarget: highlightTarget$
+    highlightTarget: highlightTarget$,
+    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
     // fullChartParams: fullChartParams$
     // highlight: highlight$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
 
@@ -499,8 +516,9 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
 
     groupBubbles({
       fullParams: data.fullParams,
-      graphicWidth: data.layout.width,
-      graphicHeight: data.layout.height
+      SeriesContainerPositionMap: data.SeriesContainerPositionMap
+      // graphicWidth: data.layout.width,
+      // graphicHeight: data.layout.height
     })
 
     bubblesSelection$.next(bubblesSelection)
@@ -514,7 +532,8 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
     ),
     fullChartParams: observer.fullChartParams$,
     fullParams: observer.fullParams$,
-    layout: observer.layout$
+    // layout: observer.layout$,
+    SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -540,8 +559,9 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
     
     groupBubbles({
       fullParams: data.fullParams,
-      graphicWidth: data.layout.width,
-      graphicHeight: data.layout.height
+      SeriesContainerPositionMap: data.SeriesContainerPositionMap
+      // graphicWidth: data.layout.width,
+      // graphicHeight: data.layout.height
     })
     force!.nodes(data.bubblesData);
   })