javascript - 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/