d3.js生産時間帯セレクタバー

この記事では、オリジナルの記事で、元のアドレス：https://www.cnblogs.com/eagle1098/p/12146688.html

上記のような効果。

このプロジェクトの用途は主にタイムラインに表示されている、上のスイッチに、2年の時間枠を選択するために使用することができ、ボタンの両端をv4の生産をd3.jsは時間の時間範囲および臨界点を選択することができます。時間データは、フロントエンドに配置することができ、あなたはバックエンドから要求することができます。

この手順は、主にD3スケールとドラッグプロセスに関連する、比較的簡単です。

1）D3スケールは、実際には別のデータ範囲に地図データの範囲であります

ここでは、リニアスケールを使用します。d3.scaleLinear（）

それは、次のような他の連続した範囲にマッピングされた連続した範囲とすることができます

1つの VARのスケール= d3.scaleLinear（）
 2     .domainを（[0、730 ]）
 3。    // startPosは、水平バーの開始時間の終わりは、x座標endposのX座標
4。     .Range（[startPos、endposの]）。

我々はタイムバーのポイントのx座標に、特定の日2年間の対応を知りたい場合は、（）スケールにパラメータとして数日を置くことができ、戻り値は、対応するx座標です。

：もちろん、他の多くの規模があり、APIドキュメントを照会することができます詳細情報d3.js https://github.com/d3/d3-scale#scaleLinear

この記事では、オリジナルの記事で、元のアドレス：https://www.cnblogs.com/eagle1098/p/12146688.html

2）ドラッグは、ここで最初の2つのスライダを有する別個ドラッグスライダー、その後ドラッグであり、主に二つの部分のです。

別のロジックスライダーをドラッグ：

。場合スライダは2つのスライダの間に黄色の線を除去し、同時に2つの貫通ドラッグされます。

B。スライダーをドラッグするかを決定するために、クラス名を使用してください。

C.マウスが算出される座標X、及びその後スケールリバース位置は、日の得られた数に対応します。

// x座標のためのXPOS 
のvar（XPOS）に変換するための指数=スケール（）レート過去を;

D.スライダーは、マウスの位置に対応した移動します。

VAR dragFun = 関数（）{
       // ドラッグ接続要素を削除
      IF （stickDragLine）{ 
        stickDragLine.remove（）; 
        stickDragLine = NULL ; 
      } 
      // 取得クリック要素クラス
      VARクラス名= d3.select（本）.ATTR （ 'クラス' ）;
       // 計算マウスXスライダの半値幅減算し、座標
      VAR POS = d3.event.x - slipBlockWidth / 2 ;
       // 計算マウスインデックス、
      VaRの指数= getIndex（POS） ;
       VAR blockIndex; 

      // 現在のブロックの位置、デフォルトの場所を構成することができ、また、後端から要求することができる
      場合（クラス名=== 'SLIP-左' ）{ 
        blockIndex = splitBlockIndex.left; 
      } 
      IF（クラス名=== 'SLIP-右' ）{ 
        blockIndex = splitBlockIndex.right; 
      } 
      // maxIndexにのみ0でスライドスライド、すなわち、上部ストライプ間の
      IF（blockIndex> = 0 && blockIndex <= maxIndex）{
         IF（クラス名=== 'SLIP-左' ）{
             // マウスの位置に左のスライダとテキストと背景を移動
            changeLeftBlock（指数）; 
        } 
        IF（クラス名===「SLIP-右」）{
             // マウスの位置に左のスライダとテキストと背景を移動
            changeRightBlock（インデックス）; 
        } 
} 
// スライダー
VAR slipBlockDrag = d3.drag（）
      .on（ 'オレンジ色' 、dragFun）;
 // スライダ要素がドラッグメソッド呼び出し
slipBlockLeft.call（slipBlockDrag）; 
slipBlockRight.call （slipBlockDrag）。

ドラッグして2つのスライダが一緒にそれらの間の黄色の接続を増やします。最後のタイムバー要素は、ドラッグアンドドロップメソッドを使用して呼び出します。

　　// 二つの主なスライダーバー入射処理
    VAR stickDrag = d3.drag（）
      .on（「オレンジ色」、関数（）{
         // スライダの計算2つの事前運動位置
        VAR leftEventX = スケール（splitBlockIndexを.LEFT）、
          rightEventX = スケール（splitBlockIndex.right）;
         IF（d3.event.x> rightEventX || d3.event.x < leftEventX）{
           リターン; 
        } 
        // 追加ドラッグ線を
        IF！（stickDragLine）{ 
          stickDragLine = _stickG.append（ 'ライン' ）
            .ATTR（ 'X1'、leftEventX + 2）
            .ATTR（ 'Y1'、stickTop + stickHeight / 2 ）
            .ATTR（ 'X2'、rightEventX + 2 ）
            .ATTR（ 'Y2'、stickTop + stickHeight / 2 ）
            .ATTR（ 'ストローク幅'、1 ）
            .ATTR （「ストローク」、「黄色」）。
        } 
        // 移动后的X 
        VAR leftAfterX = leftEventX + d3.event.dx、
          rightAfterX = rightEventX + d3.event.dx、
           // 移动后的指標 
          leftIndex = Math.floor（スケール（）反転（leftAfterX））、
          rightIndex =Math.floor（スケール（）反転（rightAfterX）。）。
        もし（（leftIndex> = 0 && rightIndex <maxIndex）&& 
          （rightIndex > = 0 && leftIndex < maxIndex））{
           // 保存移动后的指標 
          splitBlockIndex.left = leftIndex。
          splitBlockIndex.right = rightIndex。
          // 移动各元素
          changeLeftBlock（leftAfterX、splitBlockIndex.left）。
          changeRightBlock（rightAfterX、splitBlockIndex.right）。
          stickDragLine 
            .ATTR（ 'X1'、leftAfterX + 2 ）
            .ATTR（ 'X2'、rightAfterX + 2 ）;
    _stickG.call（stickDrag）。

本明細書にコードの論理構造を記述するために使用される、与えられていない、特定の機能を機能を実現することは容易です。