fix(renderer): fix icons clipPath

hatemhosny · Sep 6, 2024 · a5adf61 · a5adf61
1 parent 4127c7a
commit a5adf61
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/lib/renderer/render-frame.ts b/src/lib/renderer/render-frame.ts
@@ -226,7 +226,7 @@ export function renderFrame(data: Data[], store: Store, renderOptions: RenderOpt
       .duration(tickDuration)
       .ease(d3.easeLinear)
       .attr('cy', (d: Data) => y(d.rank as number) + barHalfHeight)
-      .attr('clip-path', 'url(#icons-rect-clip)');
+      .attr('clip-path', `url(#clipPath-${store.getState().container.element.id})`);
 
     icons
       .transition()

diff --git a/src/lib/renderer/render-initial-view.ts b/src/lib/renderer/render-initial-view.ts
@@ -136,10 +136,9 @@ export function renderInitialView(data: Data[], store: Store, renderOptions: Ren
         .attr('x', 0)
         .attr('y', 0);
 
-      // avoid icons overflow outside bars
       svg
         .append('clipPath')
-        .attr('id', 'icons-rect-clip')
+        .attr('id', 'clipPath-' + store.getState().container.element.id)
         .append('rect')
         .attr('x', x(0) + 1)
         .attr('y', margin.top)
@@ -156,7 +155,7 @@ export function renderInitialView(data: Data[], store: Store, renderOptions: Ren
         .attr('r', iconSize / 2)
         .style('fill', 'transparent')
         .style('fill', (d: Data) => `url(#${getIconID(d)})`)
-        .attr('clip-path', 'url(#icons-rect-clip)');
+        .attr('clip-path', `url(#clipPath-${store.getState().container.element.id})`);
     }
 
     const endY = height - margin.bottom;