1

I have a time scale and after zooming and scrolling I need to present exactly the same time period on the other time scale. And actually I know how to make that but I need to keep zooming level limits the same. Currently I'm saving domain and zoom.scale() values to the variables and set that domain and zoom level on the new time scale. But anyway it shows correct time period until you touch the scale after that scale become zoomed to the wrong period.

if ($rootScope.curScroll.domain)
            scale = d3.time.scale()
                .domain($rootScope.curScroll.domain)
                .range([0, w]);
        else {
            var now = new Date();
            scale = d3.time.scale()
                .domain([new Date().setTime(now.getTime() - (182.5 * 24 * 60 * 60 * 1000)), new Date().setTime(now.getTime() + (182.5 * 24 * 60 * 60 * 1000))])
                .range([0, w]);
        }
        var first = scale.domain()[0].toString();
        var last = scale.domain()[1].toString();
        var tmp = 0;

        xaxis = d3.svg.axis().scale(scale)
            .orient("top")
            //.tickSubdivide(2)
            .tickSize(25, 0)
            .tickFormat(function(d, i, e) {
                svg.select("g").selectAll("text")
                    .style("font-size", "10px")
                    .each(function() {
                        if (this.textContent != "") {
                            if (this.textContent == dateToDateShortString(new Date())) {
                                this.classList.add("today");
                                return;
                            }
                            var ar = this.textContent.split("/");
                            var dt = new Date(parseInt(ar[2], 10), parseInt(ar[1], 10) - 1, parseInt(ar[0], 10));
                            if (dt.getDay() == 0 || dt.getDay() == 1) {
                                this.classList.add("weekend");
                            }
                        }
                    });
                var ind = getInd($rootScope.selectedField, d.toISOString());
                {
                    $rootScope.curScroll.domain = scale.domain();
                    var first = scale.domain()[0].toString();
                    var last = scale.domain()[1].toString();
                    $rootScope.curScroll.zoom = zoom.scale();
                    curZoom = zoom.scale();
                    var k = 0;
                    if ((d.getMonth() + 1) % 2 == 0)
                        k = 1;
                    if (curZoom >= 64.1) {
                        if (d.getHours() == 0) {
                            if (ind != -1) weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    } else if (curZoom >= 32.5 && ind != -1) {
                        if (d.getDate() % 2 == 0) {
                            weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    } else if (curZoom >= 10.13 && ind != -1) {
                        if ((d.getDate() + 1) / 2 % 2 == 0) {
                            weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    } else if (curZoom >= 2.62 && ind != -1) {
                        if (d.getWeekNumber() % 2 == 0) {
                            weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    } else if (curZoom >= 0.87 && ind != -1) {
                        if ((d.getMonth() + 1) % 2 == 0) {
                            weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    } else {
                        if ((d.getMonth() + 2) % 2 != 0 && ind != -1) {
                            weat.push(d);
                            return "";
                        } else return dateToDateShortString(d);
                    }
                }
                return dateToDateShortString(d); //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
            });

        if ($rootScope.curScroll.zoom) {
            var zoom = d3.behavior
                .zoom()
                .scaleExtent([0.5, 100])
                .on("zoom", function(a, b, c) {
                    svg.select("g").call(xaxis);
                    getDateRange();
                    $scope.isDateInRangeMap();
                    update_events();
                    weat = [];
                    $scope.$apply();
                })
                .x(scale)
                .scale($rootScope.curScroll.zoom);//Here I'm setting needed zoom level
            scale.domain($rootScope.curScroll.domain);//Here I'm trying to reset needed domain after applying needed zoom level
            svg.select("g").call(xaxis);
        }

Is this the way to go or is there something I am missing?

1 Answer 1

0

After some time of investigation this issue I found out that I needed to save translation insteed of domain and if I apply zoom.scale() with saved value and after that apply zoom.translate() with saved value it's working fine.You need only to redraw control using svg.select("g").call(xaxis); Here is final code:

    if ($rootScope.curScroll.zoom)
        zoom.scale($rootScope.curScroll.zoom);
    if ($rootScope.curScroll.translate)
        zoom.translate($rootScope.curScroll.translate);
    svg.select("g").call(xaxis);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.