d3: svg image in zoom circle packing

airwwwave

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

airwwwave

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. :)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Why the value for r is negative from d3.hierarchy in circle packing in d3.js?

From Dev

Adding an image within a circle object in d3 javascript?

From Dev

Background image to SVG choropleth map using D3

From Dev

Image within circle object causes pixelation d3 js

From Dev

Is it possible to edit an svg:image styles in the browser? (using D3)

From Dev

How to get an non-overlapped circle packing d3 js chart?

From Dev

[D3][SVG] zoom to object

From Dev

Add color and image to fill of SVG circle

From Dev

Using D3 to fill an svg with a background image

From Dev

SVG image inside circle

From Dev

Save D3 svg as a high quality image

From Dev

Zoomable Circle Packing with Automatic Text Sizing in D3.js

From Dev

D3 Circle-Packing Clear Labeling Solution

From Dev

Add drop-shadow to svg image in D3

From Dev

SVG image tag zoom in and out animation

From Dev

D3 conditionally append image OR circle element based on variable

From Dev

D3 How to zoom in on SVG text that stays within an SVG Rectangle?

From Dev

d3.js circle packing along a line

From Dev

D3 geometric zoom when there is no SVG element under the cursor

From Dev

How to get an non-overlapped circle packing d3 js chart?

From Dev

[D3][SVG] zoom to object

From Dev

How to set image on center of svg circle?

From Dev

D3 add zoom to circle pack

From Dev

Trying to incorporate svg circle within a d3 donut

From Dev

d3 image in circle not rendering properly

From Dev

circle packing in excel vba

From Dev

Circle packing periphery detection on an image

From Dev

D3 Zoomable Circle Packing in IE11 is expanding beyond the SVG boundary

From Dev

Vertically centering a circle on a responsive D3 svg

Related Related

HotTag

Archive