Comment créer un dégradé qui traverse différents rectangles en D3JS ?

Question

Dans D3JS V4 : Supposons que vous ayez six rectangles. Comment créer un dégradé qui s'étend du premier au dernier ?

J'ai essayé de créer un groupe pour les rectangles et d'ajouter l'identifiant color-gradient-id au groupe, mais le dégradé se produit toujours à l'intérieur de chaque rectangle individuellement.

Answer 1

Vous devez définir gradientUnits a userSpaceOnUse . Selon les documents, userSpaceOnUse :

...représentent les valeurs dans le système de coordonnées qui résultent de la prise en compte du système de coordonnées de l'utilisateur en place au moment où l'élément de gradient est référencé.

Voici une démonstration sans userSpaceOnUse Ce résultat n'est pas celui que vous souhaitez :

var svg = d3.select("svg");

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "50%")
  .attr("x2", "100%")
  .attr("y2", "50%");

gradient.append("stop")
  .attr("offset", "0%")
  .attr("stop-color", "Black")
  .attr("stop-opacity", 1);

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", "white")
  .attr("stop-opacity", 1);

var g = svg.append("g")
  .style("fill", "url(#gradient)");

var rects = g.selectAll("foo")
  .data(d3.range(7))
  .enter()
  .append("rect")
  .attr("y", 20)
  .attr("x", (d, i) => 20 + 50 * i)
  .attr("width", 40)
  .attr("height", 40);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400"></svg>

Maintenant une démo avec userSpaceOnUse :

var svg = d3.select("svg");

var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "50%")
  .attr("x2", "100%")
  .attr("y2", "50%")
  .attr("gradientUnits","userSpaceOnUse");

gradient.append("stop")
  .attr("offset", "0%")
  .attr("stop-color", "Black")
  .attr("stop-opacity", 1);

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", "white")
  .attr("stop-opacity", 1);

var g = svg.append("g")
  .style("fill", "url(#gradient)");

var rects = g.selectAll("foo")
  .data(d3.range(7))
  .enter()
  .append("rect")
  .attr("y", 20)
  .attr("x", (d, i) => 20 + 50 * i)
  .attr("width", 40)
  .attr("height", 40);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400"></svg>