css - Adding an Image in d3js -

i've checked lot of replies can't of them work.

i'm using d3js interactive map , i'd fill each state different image.

using

g.selectall("#countries")   .append('image')   .attr('xlink:href', 'image-uri')   .attr('width', '500')   .attr('height', '500') 

this seems work, won't paint image in 1 of countries (setting x , y not enough because country has not fixed width or height , image overflow)

with

g.selectall("#us")   .append('image')   .attr('xlink:href', 'image-uri')   .attr('width', '500')   .attr('height', '500') 

nothing happens and, way, have same problem of case above.

since fill style property works, thought fill country using image, following code

g.selectall("#us").style('fill', 'url(urlimage-uri)'); 

this makes country disappear, if there no image paint (the image uri il valid , working)

i've been struggling days , can't seem find solution problem.

is there i'm missing?

edit:

i'm notrying fill them static image need them filled images coming json source.

using

<svg id="mysvg" width="80" height="80">     <defs id="mdef">         <pattern id="image" x="0" y="0" height="40" width="40">         <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg"></image>     </pattern> </defs> </svg> 

works i've no idea on how set different image each country.

the upper solution works using

g.selectall("#countries").style('fill', 'url(#image)') 

but going with

g.selectall("#us").style('fill', 'url(#image)') 

makes country disappear

edit:

this i'm trying add patterns dynamically

d3.json("json/world-top/latest.json", function(error, us) {     var defs = map.svg.append('svg:defs');     (var = 0; < us.length; i++) {         defs.append('svg:pattern')             .attr('id', function () { return '#image_' + us[i].track_name; })             .attr('patternunits', 'userspaceonuse')             .attr('width', '6')             .attr('height', '6')             .append('svg:image')             .attr('xlink:href', function(){return us[i].artwork_url;})             .attr('x', 0)             .attr('y', 0)             .attr('width', 6)             .attr('height', 6);     } });