D3JS different image for each circle/node

Question

So, I want to apply a different image in each circle in d3js.

One circle = one image different to others...

In my JSON data, i add a image path like this :

{"name":"Myriel","group":1,"icon": "images/01.png"},
{"name":"Napoleon","group":1,"icon": "images/10.png"}

the only solution I found for display images in circles in d3js is :

I declare refs and svg object.

for(var i=0;i<graph.nodes.length;i++){

   var defs = svg.append('svg:defs');
            defs.append('svg:pattern')
                .data(graph.nodes)
                .attr('id', "image"+i)
                .attr('width', '1')
                .attr('height', '1')
                .append('svg:image')
                .attr('xlink:href', function(d) { return(graph.nodes[i].icon); })
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', 120)
                .attr('height', 120);
}

and I built my nodes/circles like that :

  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 30)
      .style("fill","url(#image1)")
      .on("mouseover",function(){

      var sel = d3.select(this)
      sel.moveToFront();
    })
      .on("mouseout",function(){
        var sel = d3.select(this);
          sel.moveToBack();
        });

If you want more explication, say me. Sorry for my english...

Thank you in advance for helping!

Answer 1

This is the way I do it in my project (http://arda-maps.org/familytree/). I'm using png as image tough but it very similar if you just replace it with your ID from your svg path.

            node
                .append("svg:image")
                .attr("class", "circle")
                .attr("xlink:href", function (d) {
                    return "/pics/arda/creature/" + d.uniquename + "_familytree.png";
                })
                .attr("x", function (d) {
                    return familytree.posXY(d);
                })
                .attr("y", function (d) {
                    return familytree.posXY(d);
                })
                .attr("width", function (d) {
                    return familytree.sizeXY(d);
                })
                .attr("height", function (d) {
                    return familytree.sizeXY(d);
                })
                .on("error", function () {
                    d3.select(this).style("visibility", "hidden");
                });

So you should test if this works for you.

.attr("xlink:href", function (d) {
                    return "url(#image1)";
                })