1

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

但是当我使用缩放时：

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

在 Zoom 域很好之前，我在 domain() 上有问题

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)]

我不明白这种行为。

4

2 回答 2

1

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

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

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

于 2013-04-16T06:10:46.120 回答
1

关于时间尺度，如果您在未设置时间尺度域时定义缩放，则会观察到无效时间行为。在时间刻度上设置域后，您可以通过在缩放上设置时间刻度来掩盖这一点。

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);
于 2014-03-26T08:46:03.647 回答