# d3: Shift when adding Zoom function to elements

**URL:** <https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509>\
**Category:** Help\
**Created:** [November 17, 2023, 8:45am UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509 "2023-11-17T08:45:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![moon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/moon/32/8216_2.png) [@moon](https://talk.observablehq.com/u/moon)\
**Post date:** [November 17, 2023, 8:45am UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/1 "2023-11-17T08:45:50Z")

</div>

Hello, there  
I drew a star shaped scatter plot, and when I added Zoom function to it, it moved its position. I want to know why? How to solve it?

```auto
var tops = svg
        .selectAll(null) // 删除原来的路径
        .data(top)
        .enter()
        .append("g")
        .append("path")
        .attr("transform", (d) => `translate(${x(d.umap_x)},${y(d.umap_y)})`)
        .attr("d", d3.symbol(d3.symbolStar).size(300))
        .attr("fill", (d) => colorScale(d[this.colored]));

```

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e746e155aaac20d6655d315e4b55ec9e38258398.png)  
If I add Zoom functionality, it will become like this:  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5e82cd5b66f69f5e40eb90bf799b3eafa43a205a.png)

```auto
tops.attr("transform", transform).attr("size", 300 / transform.k);

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 17, 2023, 9:16am UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/2 "2023-11-17T09:16:29Z")

</div>

This is not how d3-zoom is supposed to work; please refer to the [documentation](https://d3js.org/d3-zoom) and [examples](https://observablehq.com/collection/@d3/d3-zoom).

If after this you still need help with your implementation, please share it as a notebook — so we can have the full code. Questions with incomplete code create a double burden for us, as we first need to re-create the code that doesn’t work, then fix it and explain the difference.

---

<div class="post-metadata">

**Author:** ![moon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/moon/32/8216_2.png) [@moon](https://talk.observablehq.com/u/moon)\
**Post date:** [November 17, 2023, 10:17am UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/3 "2023-11-17T10:17:55Z")

</div>

I have created a new notebook( [Simple D3 / Cui's Workspace | Observable](https://observablehq.com/d/2351bc6afe10b7be)).  
You can try deleting this comment and the stars will move:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/4a7d003ae40a491ed0856b36fbdb4d76113e796c.png)

---

<div class="post-metadata">

**Author:** ![moon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/moon/32/8216_2.png) [@moon](https://talk.observablehq.com/u/moon)\
**Post date:** [November 17, 2023, 10:43am UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/4 "2023-11-17T10:43:36Z")

</div>

Oh, thank you very much for your help. It can now be displayed normally, but I don’t understand why this situation occurs. Can you explain it to me?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 17, 2023, 2:02pm UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/5 "2023-11-17T14:02:29Z")

</div>

The suggestion is here [Comparing D3 to D3 | Observable](https://observablehq.com/compare/2351bc6afe10b7be...e650b9d252c61483)

The zoom should be monitored on the svg and applied to a container, not to each of the dots; the size attribute simply does not exist (it’s a parameter of the symbol function).

---

<div class="post-metadata">

**Author:** ![moon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/moon/32/8216_2.png) [@moon](https://talk.observablehq.com/u/moon)\
**Post date:** [November 17, 2023, 3:23pm UTC](https://talk.observablehq.com/t/d3-shift-when-adding-zoom-function-to-elements/8509/6 "2023-11-17T15:23:55Z")

</div>

OK, I see. I still have a lot to learn. I really appreciate everything you have done to help me. Thank you.