Question

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

＆＃13;

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]);
}

＆＃13;

＆＃13; 任何人都有任何其他解决方案，以设置缩放级别可能是下一个和前2个小时。感谢

Answer 1

在d3 v4中，d3.zoom（）。scaleExtent可以限制 user 缩放超出给定的边界（通过编程可以将其设置为超出范围）。这些是作为因素而不是时间范围给出的。但是您当然可以使用已知的天平开始时间和结束时间自己计算因子：

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])

d3限制时间轴的缩放级别

1 个答案: