5

我正在尝试使用 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 或 Sizzle.js 中的错误吗？

4

1 回答 1

2

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

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

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

于 2012-10-27T08:26:29.983 回答