如何在D3JS中创建跨越不同矩形的渐变？

Question

在D3JS V4中：假设你有六个矩形。如何创建一个从第一个到最后一个流动的渐变？

我尝试创建一个矩形组，并将颜色渐变ID添加到该组，但仍会导致每个矩形内部发生渐变。

- Fabio Nolasco

Answer 1

您需要将gradientUnits设置为userSpaceOnUse。根据文档，userSpaceOnUse：

...在引用渐变元素时，表示相对于当前用户坐标系的值

以下是未使用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%");

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>

现在来看一个使用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>

- Gerardo Furtado

---

嗨，Gerardo！是的，那一行代码解决了问题！我只是在定义渐变时添加了".attr("gradientUnits","userSpaceOnUse");"，这就解决了问题！非常感谢你！ - Fabio Nolasco