javascript - 当我调用d3.behavior.zoom时，我的图形range.domain()变为空

我有1个可能具有相同X标度（时间）的曲线图

ths.xRange = d3.time.scale().range([0, ths._innerWidth()]);
ths.xAxis = d3.svg.axis().scale(ths.xRange).orient("bottom");
ths.curves = [];

每条曲线都是图的子级

function curve(parent, init) {
    var ths = this;
    ths.parent = parent;
    ths.yRange = d3.scale.linear().range([ths.parent._innerHeight(), 0]);
    ths.xDomain = ths.parent.xRange.domain(d3.extent(ths.data.initial.map(function(d) { return d.date; })));
    ths.yDomain = ths.yRange.domain(d3.extent(ths.data.initial.map(function(d) { return d.val; })));
    // line generator
    ths.line = d3.svg.line()
        .interpolate("linear")
        .x(function(d) { return ths.xDomain(d.date); })
        .y(function(d) { return ths.yDomain(d.val); });

但是当我使用zoom时：

    ths._Sensitive.call(
            ths.CurrentZoom = d3.behavior.zoom()
            .x(ths.xRange)
            .scaleExtent([1,1000])
            .on("zoom", function() {
                window.clearTimeout(ths.timeoutID);
                ths.timeoutID = window.setTimeout(function() {
                    console.log('event <Improove granularity>');
                },
                400); // Delay (in ms) before request new data
                ths.zoom ();
            }
        )
    );
    ths.zoom = function(){
        console.log ('ths.xRange.domain()=', ths.xRange.domain());
        // trace l'axe X
        ths.svg().select("#xAxis").call(ths.xAxis);
    }

我在domain（）上遇到问题
缩放域好之前

graph.xRange.domain()
[Tue Jan 01 2013 00:32:00 GMT+0100 (CET), Wed Apr 10 2013 21:00:00 GMT+0200 (CEST)]

但是在Zoom之后我的domain（）是错误的！

graph.xRange.domain()
[Thu Jan 01 1970 01:00:00 GMT+0100 (CET), Thu Jan 01 1970 01:00:00 GMT+0100 (CET)]

我不明白这种行为。

最佳答案

在功能curve()中，您可以覆盖ths。因此，在调用zoom()时，使用的ths不再具有xAxis值，这意味着您在undefined上调用ths.svg().select("#xAxis")，结果是将轴的域设置为empty成为一个数组。

覆盖this的目标是能够在子函数中使用它，因此您不应在子函数中覆盖它。

顺便说说。您应该使用ths.svg.select("#xAxis")而不是ths.svg().select("#xAxis")，因为我不明白为什么代表svg元素的svg变量应该是变量。