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轴的工作小提琴： https ： //jsfiddle.net/9j4kqq1v/3/

X和Y轴的工作提琴在这里： https ： //jsfiddle.net/9j4kqq1v/5/