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

我有一个缩放和平移时间轴的内置，它沿x轴正确的时间缩放。我试图在放大或平移时获取x轴的实时状态。我如何获得这些date_min和date_max变量的持有者？d3.js缩放和平移时间轴 - 如何显示动态时间轴范围？

这里是我的jsfiddle：https://jsfiddle.net/thinkin3d/gkL821fm/

我有这个互动的时间表的最终目的是为了获得实时缩放/平移状态，该状态数据发送回服务器请求数据为这个新的时间尺度。

在上面的jsfiddle中，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]);

这里是X轴功能：

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中绑定和处理变量的方式的基本知识。

请指教！

来源

2017-08-01 Kai San

您可以得到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/

来源

2017-08-01 08:09:23

谢谢！作为后续，是否有办法等待并捕获mouseup上的最后一个x轴状态？（并忽略在鼠标拖动过程中改变的所有中间值）像zoomed（）函数上的'finally'子句一样？或者仅在UI手势结束时触发.innerHTML更新？ –

我已经在答案中编辑了解决评论中的问题的方法。 –

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

回答

相关问题