[英]d3 time scale setting initial zoom level and domain
我有一个时间刻度,在缩放和滚动后,我需要在另一个时间刻度上呈现完全相同的时间段。 实际上,我知道如何做到这一点,但我需要保持缩放级别限制不变。 目前,我正在将domain和zoom.scale()值保存到变量中,并在新的时间标度上设置该域和zoom级别。 但是无论如何,它都会显示正确的时间段,直到您将标尺缩放到错误的时间段后再触摸标尺。
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);
}
这是要走的路还是我想念的东西?
经过一段时间的调查后,我发现我需要保存翻译的域名,如果我将zoom.scale()与保存的值一起应用,然后再对zoom.translate()与保存的值一起使用,就可以正常工作。使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.