d3: Shift when adding Zoom function to elements

Community Help
1

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?

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
image1486×881 74.7 KB

If I add Zoom functionality, it will become like this:
image
image1497×897 3.34 KB

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

This is not how d3-zoom is supposed to work; please refer to the documentation and examples.

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.

3

I have created a new notebook( Simple D3 / Cui's Workspace | Observable).
You can try deleting this comment and the stars will move:

image
image1097×348 38.2 KB

4

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?

5

The suggestion is here Comparing D3 to D3 | Observable

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).

1 Like
6

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