d3: svg image in zoom circle packing

问题

UPDATE: New JSFIDDLE Scaling now working, ditched the defs and rect altogether and just appended the image. But still stuck on translate.

The translating is still not working on zoom. I can set the translate to say -100 for both x and y to get the non-zoomed placement correct. But, when zooming, it's of course still translating it -100 and not the larger value it would need to be to keep it in place.

Appears to need something in the code in the zoom section toward the bottom. Been messing with the part currently commented out, but no luck so 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. I have a d3 circle packing with a raster image inside an svg rect within each node. How do you make the image scale when zooming? The container scales, but the image stays small and repeats when zoomed. Been trying to set the defs correctly, but 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 get the container/image to translate into the center of the circle. I've commented those bits out for now because it screws everything up.

Have tried to apply info from these discussions, but still stuck. Thanks.

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

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

How to fill D3 SVG with image instead of colour with fill?

Adding elements to a D3 circle pack nodes

回答1:

Answer JSFIDDLE

Got it. The trick was changing this bit of horrible:

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

to this even worse bit of horrible:

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

Then the same for y.

Don't get me wrong, I'm grateful for the zoom circle pack template and the genius(es) who put it together. Thank you. It's just for someone at my noob level, the code above looks like a punishment of some kind. :)

来源：https://stackoverflow.com/questions/30171664/d3-svg-image-in-zoom-circle-packing

标签

javascript

image

svg

d3.js

circle-pack