使用D3实现SVG元素中的滚动条

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

svg.append("rect")
  .attr("x", 490)
  .attr("y", 0)
  .attr("width", 10)
  .attr("height", 300)
  .attr("fill", "lightgray");

svg.append("rect")
  .attr("x", 490)
  .attr("y", 0)
  .attr("width", 10)
  .attr("height", 50)
  .attr("fill", "gray");

const drag = d3.drag()
  .on("drag", function(event) {
    d3.select(this)
      .attr("y", event.y)
      .attr("y", Math.max(0, Math.min(250, event.y))); // 限制滑块的移动范围
  });

svg.select("rect")
  .call(drag);