Comment obtenir différentes nuances de couleurs pour une seule couleur?

Utilisez d3.rgb.brighter (k) ou d3.rgb.darker (k) depuis documentation d3 .

Comme ceci: let red = d3.rgb ("red") , qui donne au rouge la valeur rgb de la représentation d3 du rouge (r = 255). Ensuite, red.darker (0.5) donne un rouge plus foncé (r = 213):

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

let red = d3.rgb("red");
let darker = red.darker(0.5);
console.log(darker.toString())

Remarque: les couleurs plus claires et plus foncées peuvent être appliquées à d'autres types de couleurs (hsl, rgba, ...)

p>

Compte tenu de votre description du résultat souhaité, je doute fort que vous souhaitiez des nuances : techniquement, les nuances sont des mélanges d'une couleur donnée avec du noir , réduisant sa légèreté.

Donc, en supposant que vous vouliez vraiment des nuances , la tâche peut être effectuée avec une simple échelle linéaire allant de "rouge" à "noir" code> et en utilisant [0, 40] comme domaine (ici en utilisant le nouveau constructeur D3 v5.8):

<script src="https://d3js.org/d3.v5.min.js"></script>

Vous pouvez également définir un interpolateur si vous souhaitez modifier certaines valeurs, comme le gamma:

div {
  display: inline-block;
  width: 1px;
  height: 40px;
}

Voici la démo:

const scale = d3.scaleLinear([0, 500], ["red", "black"])
  .interpolate(d3.interpolateRgb.gamma(1.9));
d3.select("body").selectAll(null)
  .data(d3.range(501))
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

<script src="https://d3js.org/d3.v5.min.js"></script>

div {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
}

En utilisant plus de valeurs différentes dans le domaine, nous pouvons créer un dégradé avec les nuances (ce n'est qu'une démo, n'ajoutez pas 500 divs pour créer un dégradé!):

const scale = d3.scaleLinear([0, 40], ["red", "black"])
  .interpolate(d3.interpolateRgb.gamma(1.9));
d3.select("body").selectAll(null)
  .data(d3.range(41))
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

const scale = d3.scaleLinear([0,40], ["red", "black"])
    .interpolate(d3.interpolateRgb.gamma(1.9));

const scale = d3.scaleLinear([0,40], ["red", "black"])

Le commentaire principal fonctionne parfaitement, mais si quelqu'un utilise d3 v3, cela fonctionnera également.

var colors = d3.scale.linear().domain([0, 3]).range(["yellow", "red"]);
colors(0); // Yellow
colors(3); // Red