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 似乎有一种内置方法处理这种情况...

- T3db0t

---

你是否决定使用D3 v3来回答？ - Gerardo Furtado

不，这只是我目前必须使用v3的不幸现实。 - T3db0t

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>

- Xavier Guihot