snap.svgのグループの要素/子を反復処理する方法は？

Question

私は、グループ番号<g>の "グ​​ループ1"という名前のsvgグループを持っていて、それは多くの子（他のシェイプなど）を持っているとしましょう。私はsnap.svgを使ってそれらを反復したいと思います。

var group1 = s.select('#group1'); 
group1.forEach(function(child) { 

    // doesn't work 

}); 

Answer 1

あなたはまず、あなたがここにs.selectの代わりにs.selectAllを使用する必要があるのforEach here

用スナップドキュメントを見つけることができます。

var set = s.selectAll 

選択は、selectAllは、CSSのセレクタに一致するすべての要素を選択し、Setに入れて、あなたは、あなたのforEachのを使用することができます、最初の要素を選択します。

次に、あなたの例と同様に、それらを繰り返し処理できます。だから私は '*'セレクターを使って子供たちを得るでしょう。

s.selectAll('#group1 *') 
.forEach(function(el) { 
    el.attr({ fill: 'blue' }); 
}); 

いくつかの方法がセットに適用することができるあなたは具体的には、あなただけの彼らにいくつかの属性を設定すると、あなたはおそらくそれを避けることができ、forEachのを必要としない場合。したがって、上記の例は次のように書くこともできます。

s.selectAll('#group1 *').attr({ fill: 'red' });