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