D3.js：更新线性渐变中的停靠点答案

【问题标题】：D3.js: Updating the stops in a linearGradientD3.js：更新线性渐变中的停靠点
【发布时间】：2012-10-27 05:04:36
【问题描述】：

我正在尝试使用 D3.js 更新 SVG linearGradient 中的 stop 元素。你可以在这里看到我的工作小提琴：http://jsfiddle.net/nrabinowitz/C85R8/

我正在使用标准 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 时，我在更新后看到两组停止元素（无法更新渐变）。

作为比较，使用文本元素运行几乎完全相同的代码效果很好。

为什么代码在更新时不能正确选择现有的停止元素？这是 d3.select 或 Sizzle.js 中的错误吗？

【问题讨论】：

标签： svg d3.js linear-gradients

【解决方案1】：

您输入的是“stops”而不是“stop”。如果您如图所示修复该行，它将按预期工作。

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

您的代码没有选择任何内容，然后附加两个额外的（忽略的）渐变停止点。退出然后什么都没有删除，因为没有选择任何内容，留下两个原始有效停靠点和两个什么都不做的停靠点。

【讨论】：