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

在D3JSV4中：假设您有六个矩形。如何创建从第一个渐变到最后一个渐变

---

我尝试为矩形创建一个组，然后将颜色渐变id添加到该组中，但这仍然会导致渐变分别出现在每个矩形中。

您必须将

gradientUnits

设置为

userSpaceOnUse

。根据文件规定：

…表示坐标系中的值，该值是在引用渐变元素时将当前用户坐标系放置到位的结果

下面是一个没有

userSpaceOnUse

的演示，其结果不是您想要的：

var svg=d3.选择（“svg”）；
var gradient=svg.append（“defs”）
.append（“linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“50%”）
.attr（“x2”，“100%”）
.attr（“y2”，“50%”）；
渐变。附加（“停止”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”、“黑色”）
.attr（“停止不透明度”，1）；
渐变。附加（“停止”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”、“白色”）
.attr（“停止不透明度”，1）；
var g=svg.append（“g”）
.style（“填充”、“url（#渐变）”）；
var rects=g.selectAll（“foo”）
.数据（d3.范围（7））
.输入（）
.append（“rect”）
.attr（“y”，20）
.attr（“x”，（d，i）=>20+50*i）
.attr（“宽度”，40）
.attr（“高度”，40）
你好，杰拉尔多！是的，这一行代码成功了！我刚刚添加了“.attr”（“gradientUnits”，“userSpaceOnUse”）；”，在这里我定义了我的梯度，这就解决了这个问题！非常感谢你！