d3.js 缩放和平移时间线 - 如何显示动态时间线范围？

Question

我构建了一个缩放和平移时间轴，它可以正确地沿 x 轴缩放。我试图在缩放或平移时获取 x 轴的实时状态。如何获取这些 date_min 和 date_max 变量？

我使用此交互式时间线的最终目的是获取实时缩放/平移状态，并将该状态数据发送回服务器以请求此新时间尺度的数据。

div 可以渲染“x-min”和“x-max”，但我不知道如何正确连接到 d3 轴或缩放函数以获取这些动态状态变量。

这里是 x 函数：

var x = d3.time.scale()
    .domain([new Date(2017, 1, 1), new Date(2018, 1, 1)])
    .range([0, width]);

这里是 xAxis 函数：

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

这里是缩放功能：

var zoom = d3.behavior.zoom()
    .x(x)
    .xExtent([new Date(-2000, 1, 1), new Date(3000, 1, 1)])
    .on("zoom", zoomed);

这里是放大功能：

function zoomed() {
    svg.select(".x.axis").call(xAxis);
}

即使能够 console.log() x 轴范围也可以，但我缺少一些关于在 d3 和 javascript 中绑定和处理变量方式的基本知识。

请指教！

Answer 1

您可以获得xAxis.scale().domain()，其中包含当前正在显示的X轴的min和max值。 我在您的 zoomed() 函数中添加了两行，它对我有用：

function zoomed() {
    svg.select(".x.axis").call(xAxis);
    document.getElementById('x-min').innerHTML = xAxis.scale().domain()[0];
    document.getElementById('x-max').innerHTML = xAxis.scale().domain()[1];
}

要显示此内容，您必须先缩放图表。 这是更新的 jsfiddle：https://jsfiddle.net/gkL821fm/2/

编辑： 要仅在最后一次缩放后更新 div，您可以在 zoomed() 中使用超时功能，持续时间为 1000 毫秒。您可以更改它以满足您的需求。一个小的副作用是在最后一次缩放之后更新 div 会有延迟（等于您设置的持续时间）。

lastZoomDate = new Date();
setTimeout(function() {
    updateXDiv(new Date());
  }, 1000);

这里，该函数首先检查图形是否再次缩放，如果在过去 1000 毫秒内没有发生变化，则仅更新 div。

function updateXDiv(myDate) {
      if (lastZoomDate <= myDate) {
        document.getElementById('x-min').innerHTML = xAxis.scale().domain()[0];
        document.getElementById('x-max').innerHTML = xAxis.scale().domain()[1];
      }
    }

我已更新 jsfiddle 以包含此编辑：https://jsfiddle.net/gkL821fm/3/