CODEWITHSUNDEEP
javascriptd3.js
Alban
Alban

Reputation: 3215

when i call d3.behavior.zoom my graph range.domain() becomes empty

i have 1 graph with may curves with same X scale (time)

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

each curve is child of graph

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

but when i use 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);
    }

i have problem on domain() before Zoom domain is good

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

but after Zoom my domain() is wrong !

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

i don't understand this behavior.

Upvotes: 1

Views: 417

Answers (2)

Ashish Singh
Ashish Singh

Reputation: 1089

In relation to time scales, if you define the zoom when domain of the timescale is not set, the invalid time behavior is observed. You can cover this up by setting the timescale on the zoom after you've set the domain on the timescale. 

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

Upvotes: 1

Christopher Chiche
Christopher Chiche

Reputation: 15335

In the function curve() you override ths. Thus, when calling zoom(), the ths used no longer has a xAxis value, which means you call undefined on ths.svg().select("#xAxis") having the consequence to set the domain of the axis to empty as it has to be an array.

The goal of overriding this is to be able to use it in child functions, thus you should not override it in the child function.

By the way. you should use ths.svg.select("#xAxis") instead of ths.svg().select("#xAxis") as I don't get why the svg variable representing the svg element should be a variable.

Upvotes: 1

Related Questions