Background image to bubble chart

I would like to add a background image for each circle of my bubble chart. I already read some solutions on different subject but it doesn't solve my problem. All the other style are correctly added but not the background-image style.

            scope.drawChartDependance = function(rootData){

                var diameter = 900,
                    format = d3.format(",d"),
                    color = d3.scale.category20c();

                var bubble = d3.layout.pack()
                    .sort(null)
                    .size([diameter, diameter])
                    .value(function(d) { return (d.size); })
                    .padding(1.5);

                var svg = d3.select("body").append("svg")
                    .attr("width", diameter)
                    .attr("height", diameter)
                    .attr("id","svg")
                    .attr("class", "bubble");

                   var node = svg.selectAll(".node")
                    .data(bubble.nodes(classes(rootData))
                        .filter(function (d) {
                            return !d.children;
                        }))
                    .enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    });

                node.append("title")
                    .text(function(d) { return d.className + ": " + format(d.value); });

                node.append("circle")
                    .attr("r", function (d) {
                        return d.r;
                    })
                    .style("opacity", "0")
                    .style("fill", function (d) {
                        if (d.size == 1) {
                            return "black"
                        } else if (d.size == 2) {
                            return "black"
                        } else {
                            return "orange"
                        }
                    })
                .style("background-image", function (d){
                   if (d.isLocked == 0) {
                       return "myImage1.png"
                   }else {
                       return "myImage2.png"
                   }
                });

                node.append("text")
                    .attr("dy", ".3em")
                    .style("text-anchor", "middle")
                    .text(function(d) { return d.className.substring(0, d.r / 3); })
                    .style("opacity", "0");


                node.on("click", click);

                    d3.selectAll("circle").style("fill", function (d) {
                        if (d.size== 1) {
                            return "green"
                        } else if (d.size== 2) {
                            return "black"
                        } else {
                            return "orange"
                        }
                    });

                    d3.select(this).select("circle").style('fill', '#f2f40d');
                    d3.selectAll("circle").style("filter", null);
                    d3.select(this).select("circle").style("filter", "url(#f1)");

                }

                // Returns a flattened hierarchy containing all leaf nodes under the root.
                function classes(root) {
                    var classes = [];

                    function recurse(name, node) {
                        if (node.children) node.children.forEach(function (child) {
                            recurse(node.name, child);
                        });
                        else classes.push({
                            packageName: name,
                            className: node.name,
                            size: node.size,
                        });
                    }

                    recurse(null, root);
                    return {children: classes};
                }
                d3.select(self.frameElement).style("height", diameter + "px");
            }