javascript - d3 时间轴的限制缩放级别

Question

我的代码在下面用于缩放时间 X 轴。我想在时间之间设置一个限制，应该放大或缩小，即时间的上限和下限。
我尝试将边界值放入此 d3 graph with limited zoom 中建议的缩放函数中线。但它不起作用。

var x = d3.time
  .scale()
  .domain([start_date, end_date])
  .range([0, width]);

var zoom = d3.behavior
  .zoom()
  .x(x)
  .on("zoom", zoomed);

svg = d3
  .select("#chart" + k)
  .append("svg:svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("svg:g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(zoom);

function zoomed() {
  svg.selectAll(".line").remove();

  makeBackground();

  svg.select(".x.axis").call(xAxis);
  d3.select(".x.axis.top").call(xAxisTop);

  svg.select(".x.grid").call(
    make_x_axis()
      .tickSize(-height, 0, 0)
      .tickFormat("")
  );
  svg.selectAll(".circle-path").remove();
  d3.selectAll(".trainTag").remove();
  drawPaths();
  drawCircle(x, y, chartBody, trainData[0]);
}

任何人都有任何其他解决方案来设置缩放级别可能是下一个和前两个小时。
谢谢

Answer 1

在 d3 v4 中，d3.zoom().scaleExtent 允许限制用户缩放超出给定边界(但可以通过编程设置超出范围)。这些是作为因素给出的，而不是作为时间范围给出的。但是您当然可以使用已知的规模开始和结束时间自己计算这些因素:

const minTimeMilli = 20000; // do not allow zooming beyond displaying 20 seconds
const maxTimeMilli = 6.3072e+11; // approx 20 years

const widthMilli = endTime - startTime;

const minScaleFactor = widthMilli / maxTimeMilli;
const maxScaleFactor = widthMilli / minTimeMilli;

const zoom = d3.zoom()
  .scaleExtent([minScaleFactor, maxScaleFactor])