CODEWITHSUNDEEP
d3.js
sharky
sharky

Reputation: 369

About zooming in D3 radial tree

Hi I am learning D3 and working on this cluster radial tree. I am stuck at the zooming and panning characteristics of the radial tree. When I am trying to zoom in, the tree goes to the (0,0) coordinate of the window and doesn't stay at the center of the window. I was wondering if anyone working on a similar project would like to shed some light on how to keep the tree at the center of the screen while zooming and panning. Thanks

Upvotes: 1

Views: 759

Answers (1)

small_data88
small_data88

Reputation: 380

You need to include a current zoom translate vector and specify the coordinates for it. For example with my project, I had to use, .translate([480,480]). This appears to be the vector that sets your plot on the path to zooming. Here is the snippet of code I used for calling the zoom:

d3.select("svg")
  .call(d3.behavior.zoom()
  .center([770,450])
  .scaleExtent([0.3,10])
  .translate([480,480]) //add this to your zoom call, but adjust coordinates
  .on("zoom",zoom))

Upvotes: 1

Related Questions