5

D3.jsを使用stopしてSVGの要素を更新しようとしています。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を調べると、更新後に2セットの停止要素が表示されます（グラデーションの更新に失敗します）。

比較のために、テキスト要素を使用してほぼ同じコードを実行すると、完全に機能します。

更新時にコードが既存の停止要素を適切に選択しないのはなぜですか？d3.selectこれはSizzle.jsのバグですか？

4

1 に答える 1

2

「stop」の代わりに「stops」と入力しました。図のように線を修正すると、意図したとおりに機能します。

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

コードは何も選択せず、2つの余分な（無視された）グラデーションストップを追加します。何も選択されていないため、出口は何も削除しません。2つの元の有効なストップと、何もしない2つのストップが残ります。

于 2012-10-27T08:26:29.983 に答える