d3时间刻度设置初始缩放级别和域
d3 time scale setting initial zoom level and domain
我有一个时间刻度,缩放和滚动后,我需要在另一个时间标上显示完全相同的时间段。事实上,我知道如何做到这一点,但我需要保持缩放级别限制不变。目前,我正在将domain和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);
}
这是我要走的路,还是我错过了什么?
经过一段时间的调查,我发现我需要在域外保存翻译,如果我用保存的值应用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);
相关文章:
- 更改高贴图的缩放级别
- 将时间缩放添加到折线图(Chart.js)
- D3.js:缩放svg时错过刻度线
- D3js 在可缩放时间轴上更改刻度
- 缩放图:具有链接时间轴的多个时间表
- 高图表 x轴日期时间缩放
- 带注释的时间轴闪烁并重新缩放
- 完美缩放背景,仅在一定时间后出现,并事先允许背景颜色
- d3js 图的时间解析和缩放
- D3可缩放时间轴,如何获取实际极值
- d3时间刻度设置初始缩放级别和域
- 交换时间和线性缩放取决于用户选择
- 如何添加固定垂直轴的焦点+上下文缩放时间序列
- 对于线性刻度刻度的文本标签,缩放会导致标签扩展到轴之外
- D3限制缩放级别的时间轴
- 可以在时间序列Highcharts中设置最小和最大缩放
- CSS3:如何旋转和缩放图像在同一时间
- D3.JS时间序列折线图,具有实时数据、平移和缩放功能
- 缩放时如何更新轴上的刻度值
- D3JS:时间缩放和冬季月份