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

Question

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 并且它平滑地放大了。唯一的问题是，我似乎没有得到正确的翻译。所以它放大到错误的位置。

Answer 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 轴工作Fiddle：https://jsfiddle.net/9j4kqq1v/3/

此处 X 轴和 Y 轴工作 fiddle：https://jsfiddle.net/9j4kqq1v/5/

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

d3.js version 4 - rect zoom - cannot get the transformation right

javascript

zooming

d3.js