SVG Sprite Pattern, не работающий в D3

Question

Я делаю диаграмму, ориентированную на силу в D3, с узлами стран и ссылок, которые представляют общие границы этих стран. Я пытаюсь сделать каждый узел (svg rect) фоновым изображением соответствующего флага страны. Я захватил изображение и смещал данные пикселя с flag-sprites.com.

Я составляю список шаблонов SVG, соответствующих тегу ID в каждой стране, а затем пытаюсь добавить этот шаблон к каждому элементу rect с атрибутом rect «fill:».

Вот мой код: http://codepen.io/thmsdnnr/pen/ObdQvM

Я немного смущен, потому что, когда я использую инспектор в Google Chrome, каждый из моих шаблонов элементов имеет правильный идентификатор, каждый прямоугольник прикрепленное имеет полное фоновое изображение, а также соответствующее смещение «фоновой позиции».

Однако каждый узел имеет тот же флаг фонов. Когда я пытаюсь макетировать URL-адрес в шаблоне в обычный HTML-код, он тоже не работает. Может ли кто-нибудь увидеть, что здесь не так? Я чувствую себя (надеюсь, по крайней мере), я немного близок ... но я застрял.

Вот представитель Прямоугольник и 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]; 
}); 

Вот ваш обновленный Pen: http://codepen.io/anon/pen/bBzydG?editors=0010