Using JQuery Zoomer on Any Graph Element!!!

Add, remove, adjust any or all options so you can see how it works. http://stackoverflow.com/questions/21553145/how-to-achieve-magnifying-square-effect-for-d3-charts

by Nivaldo

HTML

<link rel="stylesheet" href="http://mottie.github.com/AnythingZoomer/css/anythingzoomer.css">
<script src="http://mottie.github.com/AnythingZoomer/js/jquery.anythingzoomer.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--
You can do this by not explicitly declaring width and height in the SVG (which is overwritten by CSS anyway), using the viewBox attribute, and then allowing AnythingZoom to clone the content of your original chart.

Demo: http://jsfiddle.net/H9psX/

Changes
-------
var svg = d3.select("#small-chart").append("svg")
//    .attr("width", diameter + 300)
//    .attr("height", diameter)
    .attr('viewBox', "0 0 " + 225 + " " + 225);

// ...

$("#zoom3").anythingZoomer({
    clone: true
});

Separation of concerns
----------------------

Since you are drawing in SVG using D3 (where you need to know the width and height for the pack layout) and using a jquery plugin which zooms by setting classes and absolute positioning, you have to share the coordinates (the 225px magic number) in CSS and in JS.

Ideally, you would want to keep the magic number at only one place. To do that you can declare the value only in CSS and then read them in your JS after creating your SVG element.
-->    

<p><strong>Text Demo</strong></p>

    <div id="zoom1">

        <div class="small">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate...

CSS

/* Text Demo */
.large p { width: 600px; font-size: 16px; }
.small p { width: 300px; font-size: 8px;  }

/* Image Demo */
.large img { width: 500px; height: 333px; }
.small img { width: 225px; height: 150px; }

/* Chart Demo */
.large svg { width: 500px; height: 333px; }
.small svg { width: 225px; height: 225px; }

/* Dark overlay */
.az-overlay {
    background-color: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 10;
}

/* fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
 */


.large { background: #fff; }
.zoom { display: block; margin: 0 auto; }
body { margin: 100px; }

JavaScript

var diameter = 220,
    format = d3.format(",d"),
    dataSource = 2;

var pack = d3.layout.pack()
    .size([diameter - 3, diameter - 3])
    .padding(2)
    .sort(function(a, b) {
        return -(a.value - b.value);
    })
    .value(function(d) { return d.size; });

var svg = d3.select("#small-chart").append("svg")
//    .attr("width", diameter + 300)
//    .attr("height", diameter)
    .attr('viewBox', "0 0 " + 225 + " " + 225);

var parties = [
                { name: "Conservative", color:"#6495ed" },
                { name: "New Democratic", color:"#f4a460" },
                { name: "Liberal", color:"#F08080" },
                { name: "Bloc Québécois", color:"#87CEFA" },
                { name: "Green", color:"#2F873E" }
              ];

var provincies = [
                { name: "British Columbia", acronym: "BC" },
                { name: "Alberta", acronym: "AL" },
                { name: "Saskatchewan", acronym: "SK" },
                { name: "Manitoba", acronym: "MB" },
                { name: "Ontario", acronym: "ON" },
                { name: "Quebec", acronym: "BC" },
                { name: "New Brunswick", acronym: "NB" },
                { name: "Nova Scotia", acronym: "NS" },
                { name: "Prince Edward Island", acronym: "PE" },
                { name: "Newfoundland and Labrador", acronym: "NL" },
                { name: "Yucon", acronym: "YT" },
                { name: "Northwest Territories", acronym: "NT" },
                { name: "Nunavut", acronym: "NU" }
              ];

var data = getData();

var vis = svg.datum(data).selectAll(".node")
    .data(pack.nodes)
   .enter()
    .append("g");

var titles = vis.append("title")
    .text(function(d) {
        if (!d.children) {
            return d.parent.name.toUpperCase() + " - " +
                d.name + ": " + format(d.value);
        } else {
            return d.name;
        }
    });

var circles = vis.append("circle")
    .attr("stroke", "#bbbbbb")
   ...