Question

我正在尝试使用D3.js更新SVG stop中的linearGradient元素。你可以在这里看到我的工作小提琴：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中的错误吗？

Answer 1

您输入了'停止'而不是'停止'。如果您按照所示固定线条，它将按预期工作。

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

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

D3.js：更新linearGradient中的停靠点

1 个答案: