1

I have custom build chart in D3 which is more like flat pack layout.

I want to implement a magnifier with this chart so that when the user hover over the chart, It will magnify the chart and the circles will look bigger.

I've tried the plugin anythingzoomer.js

But the problem with it is my chart is bigger in total size and I want to magnify the circles on it which are smaller in size so the mapping of original chart and cloned chart is not accurate enough.

I've used fisheye distortion plugin too but it doen't allow circles with different radii. It gives each circle a constant radius.

Do you guys have any other option?

Community
  • 1
  • 1
Yuvraj
  • 205
  • 1
  • 10

1 Answers1

0

The fisheye plugin at https://github.com/d3/d3-plugins/tree/master/fisheye provides a scaled z-value that you can use in whatever manner you want, so that it does allow for circles with different radii. The github readme does not include an example of how to combine fisheye's scale (returns as z) with nodes that have different radius values but if you take the basic example:

node.each(function(d) { d.fisheye = fisheye(d); })
  .attr("cx", function(d) { return d.fisheye.x; })
  .attr("cy", function(d) { return d.fisheye.y; })
  .attr("r", function(d) { return d.fisheye.z * 4.5; });

It's clear to see you could change the r function to something more interesting:

  .attr("r", function(d) { return d.fisheye.z * d.size; });

And it would work fine with differently sized elements.

Elijah
  • 4,609
  • 3
  • 28
  • 36
  • Hi Elijah, I've tried what you've mentioned above. I tried putting in 'd.r' instead of some constant radius. But this 'd' object is not of the chart but fisheye plugin so the radius property is not accessible there. But If you have any useful demo , please do share. – Yuvraj Sep 02 '14 at 08:55
  • No, the d should correspond to the data bound to that element, whereas d.fisheye is the fisheye plugin. I'll try to put together a simple example. – Elijah Sep 02 '14 at 15:39
  • Hi Elijah, You were right. I hadn't included radius in my inbound data to d3. That was the reason the d didn't have radius in it. Thank You for you time and advice. – Yuvraj Sep 03 '14 at 09:25