d3 时间刻度设置初始缩放级别和域

Question

我有一个时间刻度，在缩放和滚动后我需要在另一个时间刻度上呈现完全相同的时间段。实际上我知道如何做到这一点，但我需要保持缩放级别限制不变。目前，我正在将域和 zoom.scale() 值保存到变量中，并在新的时间尺度上设置该域和缩放级别。但无论如何，它会显示正确的时间段，直到您在该刻度缩放到错误的时间段后触摸该刻度。

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

这是要走的路还是我遗漏了什么？

Answer 1

经过一段时间的调查，这个问题我发现我需要保存翻译而不是域，如果我应用 zoom.scale() 保存的值，然后应用 zoom.translate()保存的值它正在工作 fine.You 只需要使用 svg.select("g").call(xaxis) 重绘控件；这是最终代码：

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

d3 时间刻度设置初始缩放级别和域

d3 time scale setting initial zoom level and domain

javascript

scale

d3.js