D3スライダーの問題

Question

D3を使用して折れ線グラフを作成しました。 X軸は時間スケールで、スライダー（d3.dragを使用して作成されています）があり、そのスライダーで日付をスライドできます。

問題がスライダが線グラフから移動しています。

Plunker：http://plnkr.co/edit/kSLVraZT9YVKCgrPY5VP?p=preview

svg.append("rect") 
    .style("pointer-events", "all") 
    .style("fill", "none") 
    .attr("width", width) 
    .attr("height", height) 
    .style("cursor", "crosshair") 
    .call(drag); 

誰かがplunkerを見て、私たちは、チャートのうち、スライダーの動きを制限する方法教えてくださいことはできますか？

ありがとうございます！

Answer 1

は手動updatePos機能で境界を確認することができます：ここでは

function updatePos(elem){ 
    var xPos = d3.mouse( elem)[0]; 
    if (xPos > x(x.domain()[1])) { 
     xPos = x(x.domain()[1]) 
    } 
    if (xPos < x(x.domain()[0])) { 
     xPos = x(x.domain()[0]) 
    } 
    handle.attr('transform', 'translate(' + xPos + ",0)"); 
    sliderDateDisplay = formatDateSliderDisplay(x.invert(xPos)); 
    text.text(sliderDateDisplay); 
} 

はデモです：http://plnkr.co/edit/q0Xl2McbteimL6QIGi4I?p=preview