Svg D3.js：更新linearGradient中的站点

我正在尝试使用D3.js更新SVG

linearGradient

中的

stop

元素。你可以在这里看到我的工作小提琴：

我使用的是数据连接、输入、更新、退出的标准D3模式，如下所示：

var stops = d3.select('#myGradient').selectAll('stops')
    .data(data);

stops.enter().append('stop');

stops
    .attr('offset', function(d) { return d[0]; })
    .attr('stop-color', function(d) { return d[1]; });

stops.exit().remove();

这对于站点的初始创建非常有效。但是，当我尝试更新时，

.selectAll（'stops'）

函数似乎找不到创建的元素。在小提琴中，当我检查SVG时，我看到更新后有两组stop元素（无法更新渐变）

相比之下，使用文本元素运行几乎完全相同的代码是完美的

---

为什么代码在更新时不能正确选择现有的停止元素？这是

d3中的一个错误。选择
或Sizzle.js？
您键入的是“停止”而不是“停止”。如果按图所示固定线路，它将按预期工作

var stops = d3.select('#myGradient').selectAll('stop')
    .data(data);

您的代码不选择任何内容，然后附加两个额外的（忽略的）渐变停止。然后，退出将不删除任何内容，因为未选择任何内容，留下两个原始有效停止和两个不执行任何操作的停止