d3.js - D3按矩形进行序数缩放无法使其工作

Question

在谷歌搜索了很多之后，当 x 轴和 y 轴都有一个序数比例时，我无法找到如何通过绘制矩形来实现缩放。

使用默认值d3.behaviour.zoom()，我可以使用鼠标滚轮/双击进行缩放/平移。但我试图在图表上绘制一个矩形，然后在选定区域上触发缩放。

基本上，我试图通过绘制一个矩形来缩放带有序数比例的热图图表。 jsfiddle

var zoom = d3.behavior.zoom().on("zoom", zoomHandler);

xRange = d3.scale.ordinal().rangeBands([0, width]);
  yRange = d3.scale.ordinal().rangeBands([height, 0]);

function zoomHandler(){
  console.log('zoomed');
  var translate = zoom.translate(),
               scale = zoom.scale();

   var tx = Math.min(0, Math.max(translate[0], width - width * scale));
   var ty = Math.min(0, Math.max(translate[1], height - height * scale));

   zoom.translate([tx, ty]);

   xRange.rangeBands([d3.event.translate[0], d3.event.translate[0] + (width * d3.event.scale)])
   yRange.rangeBands([d3.event.translate[1] + (height * d3.event.scale), d3.event.translate[1]])

   svg.select(".x.axis").call(xAxis)
   svg.select(".y.axis").call(yAxis)

   svg.selectAll(".tile")
           .attr("width", xRange.rangeBand())
           .attr("height", yRange.rangeBand())
           .attr("x", function (d) {
               return xRange(d.x);
           })
           .attr("y", function (d) {
               return yRange(d.y);
           })

}

svg.on("mousedown", function() {
    console.log('mousedown ####');
    var e = this,
        origin = d3.mouse(e),
        rect = svg.append("rect").attr("class", "zoom");
    d3.select("body").classed("noselect", true);
    origin[0] = Math.max(0, Math.min(width, origin[0]));
    origin[1] = Math.max(0, Math.min(height, origin[1]));
    d3.select(window)
        .on("mousemove.zoomRect", function() {
          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]));
          rect.attr("x", Math.min(origin[0], m[0]))
              .attr("y", Math.min(origin[1], m[1]))
              .attr("width", Math.abs(m[0] - origin[0]))
              .attr("height", Math.abs(m[1] - origin[1]));
        })
        .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]) {
            console.log('zoom rect');
            //here i need to trigger zoom translate/scale event, don't know how to trigger that.
          }
          rect.remove();
          refresh();
        }, true);
    d3.event.stopPropagation();
  });

任何帮助都感激不尽。

谢谢

标签： d3.js