SVGスプライトパターンがD3で機能しない

Question

D3で、国のノードとそれらの国の共有枠を表すリンクを使用して、強制的なグラフを作成しています。私は各ノード（svg rect）に対応する国の国旗の背景イメージを作成しようとしています。私は画像をつかんでflag-sprites.comからピクセルデータをオフセットしました。

各国のIDタグに対応するSVGパターンのリストを作成し、そのパターンをrect "fill："属性で各rect要素に追加しようとしています。ここで

は私のコードです： http://codepen.io/thmsdnnr/pen/ObdQvM

私は少し困惑している私はGoogle Chromeでインスペクタを使用したときに、私のパターン要素のそれぞれは、右のIDを持っているので、各RECTは、付属の完全な背景イメージを持っています適切な「バックグラウンド位置」のオフセットが含まれます。

ただし、各ノードには同じ背景イメージフラグがあります。パターンのURLをちょうど普通のHTMLにモックしようとすると、うまくいきません。誰かがここで間違っているのを見ることができますか？私は（少なくとも希望）私は幾分近いと感じる...しかし、私は立ち往生しています。

ここインスペクタから代表RECTとSVGのパターンです：

<rect width="25" height="15" style="stroke: none; fill: 
url(&quot;#pattern_sy&quot;); 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" 
x="441.4816383268158" y="382.4837223692339"></rect> 

<pattern width="25" height="15" id="pattern_sd"><image 
href="//raw.githubusercontent.com/thmsdnnr/learnyounode 
/master/flags.png" display="inline-block" background-repeat="no-repeat" 
style="background-position: -275px -165px;"></image></pattern> 

Answer 1

代わりに自分のパターンでbackground-positionを設定する、xとy位置を設定します。ここでは

.attr("x", function(d) { 
    if (cCodeToPos(d.code)) 
     return cCodeToPos(d.code).split(" ")[0]; 
}).attr("y", function(d) { 
    if (cCodeToPos(d.code)) 
     return cCodeToPos(d.code).split(" ")[1]; 
}); 

は、あなたの更新ペンです。 http://codepen.io/anon/pen/bBzydG?editors=0010