How to achieve magnifying square effect for D3 charts?

Question

Take a look at this jsfiddle. Magnifying on hover works well for text and images, but I would like to have the same effect for the chart.

I would like the solution, if possible, to be applicable to any D3 SVG-based chart.

The example uses jquery plugin AnythingZoomer, it looked to me as a good starting point, however, you don't need to stick to it, you can use anything else if you wish.

I am aware of D3 fisheye pluging, this is related, but not quite what I want.

Answer 1

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 (Fragile): http://jsfiddle.net/H9psX/ http://jsfiddle.net/H9psX/38/

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.