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