CODEWITHSUNDEEP
d3.js
Pete Thompson
Pete Thompson

Reputation: 41

d3 (v4) zoom using transitions doesn't seem to work

I am using the d3 zoom behaviour and attempting to use a transition for both a translateTo and a scaleTo at the same time. If I make the calls to zoom without a transition everything works fine. If I use a transition for just one of the transforms it also works, but if I attempt to use a transition for both it fails (it appears to only apply the first transform). I have a JSFiddle with several combinations here: JSFiddle

Here's the code that isn't working as I expect

svg.transition()
  .duration(750)
  .call(zoom.scaleTo, 2)
  .call(zoom.translateTo, 50, 50)

Upvotes: 4

Views: 2333

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do like this:

svg.transition()
  .duration(750)
  .call(zoom.scaleTo, 2)
  .transition() <--- this is missing.
  .call(zoom.translateTo, 50, 50)

First zoom then translate.

working code here

EDIT

Performing zoom and translate both @ same time you need to tween.

function twizzle(selection, duration) {
  d3.select(selection).transition()
      .duration(duration)
      .tween("attr:transform", function() {
        //interpolate from start to end state
        var i = d3.interpolateString("scale(1)translate(0,0)", "scale(2)translate(50,50)");
        return function(t) { 
                    selection.attr("transform", i(t)); 
                };
      });
}

Now call the function like this:

d3.select('body')
  .append('button')
  .text('transition both - scale first')
  .on('click', function() {
    //on click call the function created above
    group.call(twizzle, 750) <-- perform the scale and translate on the group not on the SVG.
  })

working code here

Upvotes: 3

Related Questions