d3.jsズーム＆パンタイムライン - ダイナミックタイムライン範囲を表示するにはどうすればいいですか？

Question

私は、ズームとパンのタイムラインを構築しました。私はそれがズームまたはパンとしてx軸のリアルタイム状態を取得しようとしています。これらのdate_minとdate_max変数を保持するにはどうすればよいですか？ここで

は私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でここで処理される方法に関する基本的なものがありません。

お知らせください！

Answer 1

現在表示されているminとmaxのX軸の値を含むxAxis.scale().domain()が得られます。 私はあなたのzoomed()関数に2行を追加し、それが私の作品：このため

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を更新するには、あなたが1000ミリ秒などの期間でzoomed()内部のタイムアウト機能を使用することができます。あなたのニーズに合わせて変更することができます。小さな副作用の1つは、最後のズーム後に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/