javascript - d3: svg image in zoom circle packing -

update: new jsfiddle scaling working, ditched defs , rect altogether , appended image. still stuck on translate.

the translating still not working on zoom. can set translate -100 both x , y non-zoomed placement correct. but, when zooming, it's of course still translating -100 , not larger value need to keep in place.

appears need in code in zoom section toward bottom. been messing part commented out, no luck far.

        // .attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })         // .attr("x", function(d) { return d.r * k; })         // .attr("y", function(d) { return d.r * k; })         .attr("width", function(d) { return d.r * k; })         .attr("height", function(d) { return d.r * k; }) 

here's jsfiddle. have d3 circle packing raster image inside svg rect within each node. how make image scale when zooming? container scales, image stays small , repeats when zoomed. been trying set defs correctly, no luck.

    var defs = svg.append("defs")     // .data(nodes)     // .enter()     .append("pattern")     .attr("id", "bg")     .attr('patternunits', 'userspaceonuse')     .attr('width', imagewidthheight)     .attr('height', imagewidthheight)     // .attr("transform", "translate(40,80)")     .append("image")     // .html("xlink:href", "img/" + function(d) { return d.image; })     .attr("xlink:href", "http://www.public-domain-photos.com/free-stock-photos-4/travel/yosemite/yosemite-meadows.jpg")     .attr('width', imagewidthheight)     .attr('height', imagewidthheight)     // .attr("transform", "translate(40,80)"); 

also, can't container/image translate center of circle. i've commented bits out because screws up.

have tried apply info these discussions, still stuck. thanks.

http://bl.ocks.org/mbostock/950642#graph.json

https://groups.google.com/forum/#!topic/d3-js/fl8_1blrcyo

how fill d3 svg image instead of colour fill?

adding elements d3 circle pack nodes

answer jsfiddle

got it. trick changing bit of horrible:

(d.x - v[0]) * k 

to worse bit of horrible:

(((d.x - v[0]) * (k)) - ((d.r / 2) * k)) 

then same y.

don't me wrong, i'm grateful zoom circle pack template , genius(es) put together. thank you. it's @ noob level, code above looks punishment of kind. :)