CODEWITHSUNDEEP
d3.js
Rick
Rick

Reputation: 711

D3 V4 zoom.transform jump on drag

I'm brand new to D3 and am reading up here on how to set the current zoom transform but I'm having troubles comprehending what I'm doing wrong.. I'm using the following line to initially center a circle on the page.

g.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));

Here is a fiddle of the issue. Just click and drag anywhere in the result window. You should see the circle instantly jump to the upper left corner.

https://jsfiddle.net/hjukmqjv/3/

Am I using the incorrect method to achieve my goal perhaps?

Upvotes: 0

Views: 1355

Answers (2)

Novembre
Novembre

Reputation: 81

First of all, You're invoking zoom two times with svg, and g. With the g the transformation is applied (the circle is in the center of the page). Then apply the svg zoom (with the zoom in/out event)that visualize the circle in it's (0,0) screen position and produce the jump.

However if you want to see the circle in the centre just put the circle in that position inserting the correct attribute to circle:

var g = svg.append("g");
g.append("circle")
.attr("r", 50)
.attr("cx",width / 2)
.attr("cy",height / 2)
.style("fill", "#B8DEE6");

and use the zoom on the svg element.

Updated fiddle

Hope it helps.

Upvotes: 1

user7521838
user7521838

Reputation: 370

you simply need to set the call on the svg

svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));

Upvotes: 4

Related Questions