Javascript 无法使用D3.js将动态创建的lineargradient附加到defs标记

嘿，我正试图根据一些数据在折线图中为多个部分设置不同的线性梯度。为此，我在init函数中创建了多个标记：

var defs = self.svg.append("defs");

self.gradient = defs.data(self.data)
    .enter()
    .append('lineargradient')
    .attr("id", function (d, i) {
        return 'svgGradient_' + i;
     })
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("y1", "100%")
    .attr("y2", "0%");

self.gradient.append("stop")
    .attr('class', 'start')
    .attr("offset", "0%")
    .attr("stop-color", "yellow")
    .attr("stop-opacity", 1);

self.gradient.append("stop")
    .attr('class', 'end')
    .attr("offset", "100%")
    .attr("stop-color", 'red')
    .attr("stop-opacity", 1);

在更新功能中，我根据数据值更改停止颜色：

d3.selectAll('linearGradient>stop.end')
    .data(self.data)
    .attr('stop-color', function (d) {
        return self.colorScale(d.current);
    });

该代码确实成功地创建了多个线性渐变，并将颜色更新为正确的值。通过创建线条部分，我将笔划设置为特定线性渐变的URL，如下所示：

.attr('stroke', function (d, i) {
        return 'url(#svgGradient_' + i + ')';
    })

从结果中看，它似乎为每个行部分都有正确的URL。但我的问题在于，线性渐变标记不是defs标记的子元素，而是html标记的子元素。线条部分也没有任何笔划颜色，即使它们链接到右侧的线性渐变标记。问题可能是标记不在defs标记下

---

任何帮助都将不胜感激。

渐变元素在技术上不需要在

元素中。但它们绝对需要在

元素中。遗憾的是，它们也不在元素中。创建一个函数，以便我们可以正确地查看代码。