D3.js - 如何用標量乘以時域？

Question

我有一個固定的時間表：

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會有一種內置的方法......

Answer 1

• 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>