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

Question

我正在尝试使用D3.js 更新stopSVG中的元素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.selectSizzle.js中的错误吗？

Answer 1

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

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

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