我有一个固定的时间尺度:
band.xScale = d3.time.scale()
.domain([data.minDate, data.maxDate])
我想用缩放进行修改:
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
function zoomed() {
console.log(d3.event.scale);
var oldDomain = bands[0].xScale.domain();
var newDomain = ??? oldDomain * d3.event.scale ???
bands[0].xScale.domain(newDomain);
bands[0].redraw();
}
换句话说,将[date1, date2]
域转换为具有新日期的新数组。
我可以自己计算转换,但我必须使用类似 Moment.js 的东西,而且看起来 d3 真的会有一个内置的方法......
- d3v4/d3v5:
d3-zoom 提供了一个 rescaleX 函数,该函数根据缩放事件更新缩放(并且可以应用于时间刻度(:
var updatedScale = d3.event.transform.rescaleX(scale);
可以应用于时间轴上的缩放事件,例如:
var scale = d3.scaleTime()
.domain([new Date(2018, 7, 20), new Date(2018, 7, 30)])
.range([0, 400]);
var axis = d3.axisBottom(scale);
var svg = d3.select("svg").append("g")
.attr("transform", "translate(50,30)")
.call(axis)
.call(d3.zoom().on("zoom", zoomed));
function zoomed() {
var updatedScale = d3.event.transform.rescaleX(scale);
svg.call(axis.scale(updatedScale));
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="100"></svg>
- D3v3:
比例链接到缩放,并通过缩放进行更新:
d3.behavior.zoom().x(scale).on("zoom", zoomed)
例如,它给出了:
var scale = d3.time.scale()
.domain([new Date(2018, 7, 20), new Date(2018, 7, 30)])
.range([0, 400]);
var axis = d3.svg.axis().scale(scale);
var svg = d3.select("svg").append("g")
.attr("transform", "translate(50,30)")
.call(axis)
.call(d3.behavior.zoom().x(scale).on("zoom", zoomed));
function zoomed() {
axis.scale(scale);
svg.call(axis.scale(scale));
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>