Question

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

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

此交互式时间轴的最终目的是获得实时缩放/平移状态，并将该状态数据发送回服务器以请求此新时间范围的数据。

在上面的jsfiddle中，div用于渲染＆＃34; x-min＆＃34;和＆＃34; x-max＆＃34;但我不知道如何正确挂钩到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

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

zoomed()

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

修改要仅在最后一次缩放后更新div，可以使用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]; }内的超时功能，持续时间为1000 ms。您可以根据自己的需要进行更改。一个小的副作用是在最后一次缩放后更新div时会有延迟（等于你设置的持续时间）。

zoomed()

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

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

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

d3.js Zoom＆amp;平移时间线 - 如何显示动态时间线范围？

1 个答案: