Multiple patterns d3 svg

I want to change the background when the mouse is over a circle, but each circle has a different image

Here is my visualization

and this is my code, I don't know why is not working. It seems that the SVG is OK but when the mouse is over a circle nothing happens and I don't know what I'm doing wrong.

  var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
    .style("fill", function(d) { return d.children ? genderColor(d) : null; })
    .attr('id', function (d) { return 'circle-' + d.object.id; })
    .on('mouseover', circleMouseOver)
    .on('mouseout', circleMouseOut)
    .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });


var defs = circle
    .append('defs')
    .append('pattern')
    .attr('id', function(d) { return 'pic-' + d.object.id; })
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 100)
    .append('svg:image')
    .attr('xlink:href', function(d) { return d.object.funcionario.foto.thumbnail; })
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);

  function circleMouseOver (d) {
    d3.select(this)
      .style("fill", "url(#pic-"+ d.object.id +")");
    d3.select('#text-' + d.object.id)
      .text(function(d){
          return d.object.cargo.categoria.nombre;
      })
  }