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);

有人可以看一下那个弹药，让我知道如何限制滑块移出图表？

谢谢！

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

D3滑块问题

1 个答案: