d3 -画笔/平移缩放-在x轴上方禁用平移

// 创建SVG元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 定义x轴和y轴的比例尺
var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 500]);

var yScale = d3.scaleLinear()
  .domain([0, 10])
  .range([500, 0]);

// 创建x轴和y轴
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

// 添加坐标轴到SVG元素
svg.append("g")
  .attr("transform", "translate(0, 500)")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

// 创建可视化图表
svg.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .attr("fill", "red");

// 创建平移缩放功能
var zoom = d3.zoom()
  .scaleExtent([1, 10])
  .translateExtent([[0, 0], [500, 500]])
  .on("zoom", zoomed);

// 应用平移缩放功能到SVG元素
svg.call(zoom);

// 平移缩放事件处理函数
function zoomed() {
  // 禁用在x轴上方的平移
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "mousemove") {
    var [x, y] = d3.mouse(this);
    if (y > yScale(0)) {
      return;
    }
  }

  // 更新可视化图表的位置和大小
  svg.attr("transform", d3.event.transform);
}