D3 add zoom to circle pack

Colman McMahon

Is it possible to add zooming to a circle pack? Seems like it should be but mine is jumping all around the place when zoom is clicked. I've been attempting to solve this for a few days but with little success.

I've been referencing Mike's Zoomable Circle Packing block (#7607535) and nilanjenator's block (#4950148). Other examples seem to be based on these two. Here's a fiddle of my work in progress: http://jsfiddle.net/cajmcmahon/9weovdm2/5/.

From what I can make out, my layout problems lie in these two functions:

t.selectAll("circle")
        .attr("cx", function(d) {
            return x(d.x);
        })
        .attr("cy", function(d) {
            return y(d.y);
        })
        .attr("r", function(d) {
            return k * d.r;
        });

t.selectAll("text")
        .attr("x", function(d) {
            return x(d.x);
        })
        .attr("y", function(d) {
            return y(d.y);
        })
        .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

Also, I can't get the viz to reset (zoom out?) when I click on the background. I believe it's not getting values for 'data'...

//Reset when click on background
    d3.select(window).on("click", function(d, i) {
        zoom(data)
    });

Thanks for any help.

Cyril Cherian

Ok both examples:

Have same output but they are implemented differently.

  1. http://bl.ocks.org/nilanjenator/4950148: This one relies on changing the cx and cy of the circle for moving and updating the radius for zoom effect.
  2. http://bl.ocks.org/mbostock/7607535: This one relies on translate to move the circles.

So in your example: you mixed both of it and thus you got a different flavor of circle packing.

You created circles and moved it into their position using translate but in the zoom section you made use of changing the cx and cy, as a result your circles flew out of the pack on zooming.

I have removed the translate and gave the cx and cy so the zoom function remain the same as what you have written.

node.append("circle")
    .attr("r", function(d) {
        return d.r;
    })
     .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })

    .on("click", function(d) { 
        zoom(node == d ? root : d); 
    });

I have changed the fiddle you gave here is a working example: http://jsfiddle.net/cyril123/khq21pgb/2/

Hope this is helpful!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Circle Pack Layout D3 - remove add nodes on new data

From Dev

Add circle to pack layout

From Dev

Different colors for each circle - D3 circle pack

From Dev

Realtime D3 bubble chart (circle pack)

From Dev

D3 Circle Pack Layout with a horizontal arrangement

From Dev

Keeping aspect ratio of D3 circle pack - responsive design

From Dev

Text along circles in a D3 circle pack layout

From Dev

Tooltips for nested circles in D3 circle pack layout

From Dev

Controlling order of circles in D3 circle pack layout algorithm

From Dev

Adding hyeperlinks to zoomable d3 circle pack

From Dev

stop d3 circle pack labels from overlapping

From Dev

Controlling order of circles in D3 circle pack layout algorithm

From Dev

Keeping aspect ratio of D3 circle pack - responsive design

From Dev

Undefined function when loading D3 circle pack

From Dev

d3: svg image in zoom circle packing

From Dev

D3 - How to convert circle-pack to ellipse-pack?

From Dev

'd3-circle-text' on zoomable circle-pack

From Dev

D3 update circle-pack data new nodes overlap existing nodes

From Dev

is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

From Dev

D3 v4 - add transition to just zoom and not pan/drag

From Dev

How to add the filter or ScaleExtent in d3 v4 in Timeline with Zoom functionality

From Dev

d3 stacking and zoom

From Dev

D3 Zoom in version 3

From Dev

How to center root node circle in a d3.layout.pack graph?

From Dev

how to update data form file json using d3.js (zoomable circle pack)

From Dev

How to center root node circle in a d3.layout.pack graph?

From Dev

pack in small circles into a bigger circle

From Dev

Generating visually pleasing circle pack

From Dev

How to add small circle into big circle in css3?

Related Related

  1. 1

    Circle Pack Layout D3 - remove add nodes on new data

  2. 2

    Add circle to pack layout

  3. 3

    Different colors for each circle - D3 circle pack

  4. 4

    Realtime D3 bubble chart (circle pack)

  5. 5

    D3 Circle Pack Layout with a horizontal arrangement

  6. 6

    Keeping aspect ratio of D3 circle pack - responsive design

  7. 7

    Text along circles in a D3 circle pack layout

  8. 8

    Tooltips for nested circles in D3 circle pack layout

  9. 9

    Controlling order of circles in D3 circle pack layout algorithm

  10. 10

    Adding hyeperlinks to zoomable d3 circle pack

  11. 11

    stop d3 circle pack labels from overlapping

  12. 12

    Controlling order of circles in D3 circle pack layout algorithm

  13. 13

    Keeping aspect ratio of D3 circle pack - responsive design

  14. 14

    Undefined function when loading D3 circle pack

  15. 15

    d3: svg image in zoom circle packing

  16. 16

    D3 - How to convert circle-pack to ellipse-pack?

  17. 17

    'd3-circle-text' on zoomable circle-pack

  18. 18

    D3 update circle-pack data new nodes overlap existing nodes

  19. 19

    is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

  20. 20

    D3 v4 - add transition to just zoom and not pan/drag

  21. 21

    How to add the filter or ScaleExtent in d3 v4 in Timeline with Zoom functionality

  22. 22

    d3 stacking and zoom

  23. 23

    D3 Zoom in version 3

  24. 24

    How to center root node circle in a d3.layout.pack graph?

  25. 25

    how to update data form file json using d3.js (zoomable circle pack)

  26. 26

    How to center root node circle in a d3.layout.pack graph?

  27. 27

    pack in small circles into a bigger circle

  28. 28

    Generating visually pleasing circle pack

  29. 29

    How to add small circle into big circle in css3?

HotTag

Archive