Question

d3.js verison 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/

d3.js版本4 - rect zoom - 无法正确转换

1 个答案: