d3（v4）使用转换进行缩放似乎不起作用

Question

我正在使用d3缩放行为并尝试同时使用translateTo和scaleTo的转换。如果我调用缩放而没有转换，一切正常。如果我只对其中一个转换使用转换它也可以工作，但是如果我尝试使用它的转换失败（它似乎只应用第一个转换）。我有一个JSFiddle，其中有几个组合：JSFiddle

这里的代码没有像我期望的那样工作

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

Answer 1

你可以这样做：

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

先缩放然后翻译。

工作代码here

修改

在您需要补间的同时执行缩放和翻译。

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)); 
                };
      });
}

现在调用这个函数：

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

工作代码here