Reverse the direction of the color in linear gradient legend-CodePudding

I have an continuous legend(both vertical and horizontal) and currently the color are flown from red to blue but I want it to be in reverse direction like from blue to red. I have shared by code snippet and also the Fiddle link

Fiddle Link : 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)

CodePudding user response：

You can change linerGradient to start from right. Right now you are filling from Left. You can do this by changing x1 and x2 in your gradient def.

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  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  x="25" y="20">Legend</text>
        <rect x="25" y="30" width="250" height="25" style="fill: url(&quot;#linear-gradient&quot;);"></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  stroke="currentColor" d="M10,6V0H258V6"></path>
          <g  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  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>

CodePudding user response：

I think reversing your <stop> element should do:

<div id="container">
  <svg  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  x="25" y="20">Legend</text>
        <rect x="25" y="30" width="250" height="25" style="fill: url(&quot;#linear-gradient&quot;);"></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  stroke="currentColor" d="M10,6V0H258V6"></path>
          <g  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  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>