如何反转线性渐变连续图例的颜色方向（支持垂直与水平布局）

要把你的图例从红色到蓝色的流向改成蓝色到红色，咱们只需要调整三个核心部分：线性渐变的起止方向、颜色数据的顺序，以及刻度轴的定义域/值域映射，下面一步步来改：

1. 反转线性渐变的起止坐标 #

你的线性渐变是通过x1/x2和y1/y2控制方向的，反转方向只需要交换对应的起止值：

linearGradient = defs
.append("linearGradient")
.attr("id", id)
// 交换x1/x2、y1/y2的取值以反转渐变方向
.attr("x1", horizontal ? "100%" : "0%")
.attr("x2", horizontal ? "0%" : "0%")
.attr("y1", horizontal ? "0%" : "100%")
.attr("y2", horizontal ? "0%" : "0%");

2. 反转颜色节点的数据集顺序 #

你的itemColor是基于data数组生成的，原数据是从0.0（红）到1.0（蓝），直接反转数据集就能让颜色节点从蓝到红排列：

linearGradient
.selectAll("stop")
// 给数据集加上reverse()反转颜色顺序
.data(itemColor.reverse())
.enter()
.append("stop")
.attr("offset", function (data) { return data.offset + "%"; })
.attr("stop-color", function (data) { return data.color; });

如果你的itemColor是直接从原始data转换来的，也可以先反转data数组：const reversedData = data.reverse();，再用它生成itemColor。

3. 调整刻度轴的映射关系 #

为了让刻度和新的渐变方向匹配，需要反转刻度轴的定义域和值域对应关系：

// 水平轴：反转domain的min和max顺序
const xLeg = scaleLinear().domain([max, min]).range([10, 158]);
// 垂直轴：将原来的[max, min] domain改为[min, max]
let yLeg = scaleLinear().domain([min, max]).range([10, 158]);

修改后的完整核心代码片段 #

// 创建图例
const id = "linear-gradient-" + id + "0";
linearGradient = defs
.append("linearGradient")
.attr("id", id)
.attr("x1", horizontal ? "100%" : "0%")
.attr("x2", horizontal ? "0%" : "0%")
.attr("y1", horizontal ? "0%" : "100%")
.attr("y2", horizontal ? "0%" : "0%");

// 添加颜色节点（反转数据集）
linearGradient
.selectAll("stop")
.data(itemColor.reverse())
.enter()
.append("stop")
.attr("offset", function (data) { return data.offset + "%"; })
.attr("stop-color", function (data) { return data.color; });

// 绘制填充渐变的矩形（这部分无需修改）
svgLegend
.append("rect")
.attr("x", 35)
.attr("y", horizontal ? 70 : 18)
.attr("width", horizontal ? "189" : 20)
.attr("height", horizontal ? 20 : "149")
.style("fill", "url(#" + currentIndex + ")");

// 创建刻度（反转domain映射）
const xLeg = scaleLinear().domain([max, min]).range([10, 158]);
let yLeg = scaleLinear().domain([min, max]).range([10, 158]);
const horizontalAxisLeg = axisBottom(xLeg).tickValues(colorScale.domain());
const VerticalAxisLeg = axisRight(yLeg).tickSize(20).tickValues(colorScale.domain());

这样调整之后，你的图例颜色流向就会完全反转，从蓝色到红色显示，同时刻度也会和新的渐变方向完美对应上。

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