d3.js 版本 4 - 矩形缩放 - 无法正确转换答案

【问题标题】：d3.js version 4 - rect zoom - cannot get the transformation rightd3.js 版本 4 - 矩形缩放 - 无法正确转换
【发布时间】：2017-01-04 07:24:12
【问题描述】：

d3.js 版本 4：我有一个折线图，它应该有一个矩形缩放。我用了这个例子：http://bl.ocks.org/jasondavies/3689931

我不想将矩形数据应用于比例，就像示例中一样

相反，我想将此应用于我的正常缩放元素。

为此，我有数学：

.on("mouseup.zoomRect", function() {
        d3.select(window).on("mousemove.zoomRect", null).on("mouseup.zoomRect", null);
        d3.select("body").classed("noselect", false);
        var m = d3.mouse(e);
        m[0] = Math.max(0, Math.min(width, m[0]));
        m[1] = Math.max(0, Math.min(height, m[1]));
        if (m[0] !== origin[0] && m[1] !== origin[1]) {

          //different code here

          //I have the scale factor
          var zoomRectWidth = Math.abs(m[0] - origin[0]);
          scaleFactor = width / zoomRectWidth;

          //Getting the translation
          var translateX = Math.min(m[0], origin[0]);

          //Apply to __zoom Element
          var t = d3.zoomTransform(e.node());
          e.transition()
                            .duration(that.chart.animationDuration)
                            .call(that.chart.zoomX.transform, t
                                .translate(translateX, 0)
                                .scale(scaleFactor)
                                .translate(-translateX, 0)
                            );
        }
        rect.remove();
        refresh();
      }, true);

所以我实际上得到了正确的 scaleFactor 并且它可以平滑地放大。唯一的问题是，我似乎没有得到正确的翻译。所以它放大到错误的位置。

【问题讨论】：

标签： javascript d3.js zooming

【解决方案1】：

所以，现在我做对了：早期缩放的所有转换都需要撤消。

使得 k = 1, x = 0, y = 0; 这是 d3.zoomIdentity。从那时起，需要应用当前缩放，然后再进行平移。

之后需要应用旧的变换，先平移再缩放

var t = d3.zoomTransform(e.node());

//store x translation
var x = t.x;

//store scaling factor
var k = t.k;

//apply first rect zoom scale and then translation
//then old translate and old zoom scale
e.transition()
  .call(that.chart.zoomX.transform, d3.zoomIdentity
  .scale(scaleFactor)
  .translate(-translateX, 0)
  .translate(x)
  .scale(k)
);

此处仅适用于 X 轴：https://jsfiddle.net/9j4kqq1v/3/

X 轴和 Y 轴的工作小提琴：https://jsfiddle.net/9j4kqq1v/5/

【讨论】：