Tengo una leyenda continua (tanto vertical como horizontal) y actualmente el color se mueve de rojo a azul, pero quiero que sea en dirección inversa, como de azul a rojo. He compartido por fragmento de código y también el enlace Fiddle
Enlace de violín: https://jsfiddle.net/64drqnxf/
// create the legend const id = "linear-gradient-" + id + "0"; linearGradient = defs .append("linearGradient") .attr("id", id) .attr("x1", "0%") .attr("x2", horizontal ? "100%" : "0%") .attr("y1", "0%") .attr("y2", horizontal ? "0%" : "100%"); // append the color linearGradient .selectAll("stop") .data(itemColor) .enter() .append("stop") .attr("offset", function (data) { return data.offset + "%"; }) .attr("stop-color", function (data) { return data.color; }); // draw the rectangle and fill with gradient 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 + ")"); // create tick const xLeg = scaleLinear().domain([min, max]).range([10, 158]); let yLeg = scaleLinear().domain([max, min]).range([10, 158]); const horizontalAxisLeg = axisBottom(xLeg).tickValues(colorScale.domain()); const VerticalAxisLeg = axisRight(yLeg).tickSize(20).tickValues(colorScale.domain()); Also my data is structed something like this const data = [ [0.0, 255, 0, 0], [0.25, 255, 255, 0], [0.5, 0, 255, 0], [0.75, 0, 255, 255], [1.0, 0, 0, 255] ] Where first value in the array is point and next three values are rgb values. 0(point) --> color(255, 0, 0)Puede cambiar linerGradient para comenzar desde la derecha. En este momento estás llenando desde la izquierda. Puede hacer esto cambiando x1 y x2 en su definición de gradiente.
linearGradient = defs .append("linearGradient") .attr("id", id) .attr("x1", "100%") //Change this to 100% .attr("x2", horizontal ? "100%" : "0%") //This to 0% .attr("y1", "0%") .attr("y2", horizontal ? "0%" : "100%"); <div id="container"> <svg class="axis" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 5px;"> <defs> <linearGradient id="linear-gradient" x1="100%" x2="0%" y1="0%" y2="0%"> <stop offset="0%" stop-color="#ff0000"></stop> <stop offset="25%" stop-color="#ffff00"></stop><stop offset="50%" stop-color="#00ff00"></stop> <stop offset="75%" stop-color="#00ffff"></stop><stop offset="100%" stop-color="#0000ff"></stop> </linearGradient></defs> <text class="legendTitle" x="25" y="20">Legend</text> <rect x="25" y="30" width="250" height="25" style="fill: url("#linear-gradient");"></rect> <g transform="translate(15, 55)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="font-size: 10px; font-weight: 700;"> <path class="domain" stroke="currentColor" d="M10,6V0H258V6"></path> <g class="tick" opacity="1" transform="translate(10,0)"> <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.00</text><g> <g class="tick" opacity="1" transform="translate(258,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.35</text></g></svg> </div>Creo que invertir tu elemento <stop> debería funcionar:
<div id="container"> <svg class="axis" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 5px;"> <defs> <linearGradient id="linear-gradient" x1="0%" x2="100%" y1="0%" y2="0%"> <stop offset="0%" stop-color="#0000ff"></stop> <stop offset="25%" stop-color="#00ffff"></stop> <stop offset="50%" stop-color="#00ff00"></stop> <stop offset="75%" stop-color="#ffff00"></stop> <stop offset="100%" stop-color="#ff0000"></stop> </linearGradient></defs> <text class="legendTitle" x="25" y="20">Legend</text> <rect x="25" y="30" width="250" height="25" style="fill: url("#linear-gradient");"></rect> <g transform="translate(15, 55)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="font-size: 10px; font-weight: 700;"> <path class="domain" stroke="currentColor" d="M10,6V0H258V6"></path> <g class="tick" opacity="1" transform="translate(10,0)"> <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.00</text><g> <g class="tick" opacity="1" transform="translate(258,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.35</text></g></svg> </div>