Swift Charts折线图X/Y轴拖拽缩放调整问题求助

问题场景 #

开发Mac应用，使用Swift Charts折线图展示数据，希望通过拖拽手势实现X/Y轴缩放（例如将X轴从0-100调整为25-50区间）。使用.chartXScale(domain:)和.chartYScale(domain:)修饰符调整轴范围后，出现折线超出图表区域的问题。

缩放前效果：

缩放后异常效果：

问题根源 #

Swift Charts设置轴的domain范围后，默认不会自动裁剪超出该范围的绘图内容，导致折线会绘制到图表的外部区域。

解决方案 #

提供两种可行的修复方式，可根据需求选择：

方案1：过滤数据，仅绘制可见范围的点

直接在Chart的数据源中过滤出当前轴范围内的数据，确保折线只绘制可见区间的内容：

// 修改Chart的数据源部分
Chart(globalData.displayChannle.filter { $0.time >= xMin && $0.time <= xMax }) {
    LineMark(
        x: .value("Time", $0.time),
        y: .value("Value", $0.value)
    )
}
.chartXScale(domain: xMin...xMax)
.chartYScale(domain: yMin...yMax)

方案2：添加裁剪修饰符，限制绘图范围

给Chart添加.clipShape(Rectangle())修饰符，强制裁剪超出图表绘图区域的内容：

Chart(globalData.displayChannle) {
    LineMark(
        x: .value("Time", $0.time),
        y: .value("Value", $0.value)
    )
}
.chartXScale(domain: xMin...xMax)
.chartYScale(domain: yMin...yMax)
.clipShape(Rectangle()) // 添加裁剪

拖拽缩放逻辑优化（可选） #

当前zoom()方法固定增减2，体验不够流畅，可改为根据拖拽距离动态调整范围，同时限制超出原始数据边界：

func zoom() {
    let originalMin = globalData.displayChannle.first?.time ?? 0
    let originalMax = globalData.displayChannle.last?.time ?? 20
    let xRange = xMax - xMin
    
    // 根据拖拽偏移量计算调整幅度，可自行调整系数
    let delta = (currentXPositon - startingXPostion) * 0.1
    
    if currentXPositon > startingXPostion {
        // 向右拖拽：缩小X轴范围（放大图表）
        let newMin = xMin + delta
        let newMax = xMax - delta
        // 限制最小范围，避免缩得过小
        if newMax - newMin > 1 {
            xMin = newMin
            xMax = newMax
        }
    } else {
        // 向左拖拽：扩大X轴范围（缩小图表）
        let newMin = xMin - delta
        let newMax = xMax + delta
        // 限制不超出原始数据的边界
        xMin = max(newMin, originalMin)
        xMax = min(newMax, originalMax)
    }
}

内容的提问来源于stack exchange，提问作者kka41