Question

根据标题，我想在用户放大后重绘我的图表。

我正在听“zoomend”，这非常方便。诀窍是，我需要重新获取数据，因此需要在此事件监听器范围内调用一个函数。

此外，我需要使用用户刚刚放大的范围的最大值和最小值。

以下是代码设置：

var zoom = d3.behavior.zoom()
               .x(xAsTime)
               .y(y)
               .on("zoom", zoomFunction)
               .on("zoomend", zoomEndFunction);

var svg = histogram_container.append("svg")
               .attr('class', 'chart')
               .attr('width', width + margin.left + margin.right)
               .attr('height', height + margin.top + margin.bottom)
               .call(zoom)
             .append('g')
               .attr('transform', 'translate(' + margin.left +
                     ', ' + margin.top + ')');

我的zoomFunction只进行转换：

function zoomFunction() {
              svg.select(".x.axis").call(xAxis);
              svg.selectAll("rect.bar").attr("transform", "translate(" +
                  d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");
}

我希望我的zoomEndFunction能做到这样的事情：

function zoomEndFunction() {
              // I'm trying to get hold of the parent object
              that = event.data.self; // <------ DOESN'T WORK.  HOW DO I GET 'THIS'?

              // get the minimum visible X from the scale
              that.startDate = xAxis.scale().invert(0);

              // get the maximum visible X from the scale
              that.endDate = xAxis.scale().invert(1000);

              // redraw the cart
              that.fetchDataAndRedrawChart();
}

更新

我能够获得很大一部分难题。虽然我尝试使用封闭之前没有成功，但是因为我做错了。这是捕获父对象的代码：

function zoomEndFunction(scope) {
    return function() {
        var that = scope;
        // do whatever I want with that
    }
}

这意味着我需要更改以上行：

.on("zoomend", zoomEndFunction);

到

.on("zoomend", zoomEndFunction(this));

d3使用新的放大范围缩放重绘图表

0 个答案: