Question

我有1个图，其中may曲线具有相同的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); });

但是当我使用缩放时：

    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);
    }

我在域上有问题（）在缩放域之前

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

但放大后我的域名（）错了！

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

我不明白这种行为。

Answer 1

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

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

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

Answer 2

关于时间刻度，如果在未设置时间刻度的域时定义缩放，则会观察到无效的时间行为。您可以在时间刻度上设置域后，通过在缩放上设置时间刻度来解决此问题。

var xScale = d3.time.scale()
               .range([0,width]);

var zoom = d3.behavior.zoom()
             .on("zoom", function(){
                 console.log("zoomed", d3.event.scale);
             });

xScale.domain([new Date('2014-03-15'), new Date('2014-03-30')]);

zoom.x(xScale);

当我调用d3.behavior.zoom时，我的图形range.domain（）变为空

2 个答案: