0

I've checked a lot of replies but I can't get any of them to work.

I'm using the d3js interactive map and I'd like to fill each state with a different image.

Using

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

this seems to work, but it won't paint the image just in one of the countries (setting x and y is not enough because the country has not a fixed width or height and so the image will always overflow)

With 

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

nothing happens and, by the way, we would have the same problem of the case above.

Since the fill style property works, I thought to fill the country using an image, with the following code

g.selectAll("#US").style('fill', 'url(urlimage-uri)');

This makes the country just disappear, like if there is no image to paint (the image uri il valid and working)

I've been struggling with this for days and I can't seem to find a solution to this problem.

Is there something that I'm missing?

EDIT:

I'm notrying to fill them with a static image but I need them to be filled by images coming from a 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 but I've no idea on how to set a different image for each country.

The upper solution works just using

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

but going with

g.selectAll("#US").style('fill', 'url(#image)')

makes the country disappear

EDIT:

This is what I'm trying to add patterns dynamically

d3.json("json/world-top/latest.json", function(error, us) {
    var defs = map.svg.append('svg:defs');
    for (var i = 0; i < 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);
    }
});
Clemens Tolboom
  • 1,872
  • 18
  • 30
StepTNT
  • 3,867
  • 7
  • 41
  • 82
  • [This question](http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript) should help. – Lars Kotthoff May 17 '14 at 12:51
  • Ok, it works, but I'm forced to use a fixed image for each country. How can I make it work using images that are coming from a json? – StepTNT May 17 '14 at 12:58
  • You can define the fill images dynamically. – Lars Kotthoff May 17 '14 at 13:27
  • Can you please provide a working sample? I've been able to change the image dynamically, but when I do it every circle gets changed and this is not what I want. – StepTNT May 26 '14 at 21:39
  • You need to define a separate pattern for each image you want to use. If you post the code you have so far, I could try to figure out where it's going wrong. – Lars Kotthoff May 27 '14 at 08:11
  • The ID you generate in your code doesn't seem to depend on `i`, so it would be the same for every pattern, wouldn't it? – Lars Kotthoff May 27 '14 at 10:12
  • Nope, it was just a typo. When running this code, nothing is added to the HTML code, so I've got no patterns at all, even if I'm appending them – StepTNT May 27 '14 at 10:23
  • This would be added to the SVG. Did you verify that the data is loaded correctly and the loop runs as you expect? – Lars Kotthoff May 27 '14 at 11:11

0 Answers0