From f83f2f1c2769756e4351584148f200d711dd88f6 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Wed, 23 Dec 2020 10:14:16 +0900
Subject: [PATCH] fix(circle-packing): fix HTML implementation overflow

---
 .../circle-packing/src/CirclePackingHtml.tsx  | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/circle-packing/src/CirclePackingHtml.tsx b/packages/circle-packing/src/CirclePackingHtml.tsx
index 938ad8a7b..24d2fc9f8 100644
--- a/packages/circle-packing/src/CirclePackingHtml.tsx
+++ b/packages/circle-packing/src/CirclePackingHtml.tsx
@@ -78,7 +78,6 @@ export const InnerCirclePackingHtml = <RawDatum,>({
     if (layers.includes('circles')) {
         layerById.circles = (
             <Circles<RawDatum>
-                key="circles"
                 nodes={zoomedNodes}
                 isInteractive={isInteractive}
                 onMouseEnter={onMouseEnter}
@@ -114,23 +113,30 @@ export const InnerCirclePackingHtml = <RawDatum,>({
             role={role}
             style={{
                 position: 'relative',
+                overflow: 'hidden',
                 width: outerWidth,
                 height: outerHeight,
-                marginTop: margin.top,
-                marginLeft: margin.left,
             }}
         >
-            {layers.map((layer, i) => {
-                if (layerById[layer as CirclePackingLayerId] !== undefined) {
-                    return layerById[layer as CirclePackingLayerId]
-                }
+            <div
+                style={{
+                    position: 'absolute',
+                    top: margin.top,
+                    left: margin.left,
+                }}
+            >
+                {layers.map((layer, i) => {
+                    if (layerById[layer as CirclePackingLayerId] !== undefined) {
+                        return layerById[layer as CirclePackingLayerId]
+                    }
 
-                if (typeof layer === 'function') {
-                    return <Fragment key={i}>{createElement(layer, layerContext)}</Fragment>
-                }
+                    if (typeof layer === 'function') {
+                        return <Fragment key={i}>{createElement(layer, layerContext)}</Fragment>
+                    }
 
-                return null
-            })}
+                    return null
+                })}
+            </div>
         </div>
     )
 }