Adding fisheye to axes with D3 JS

Question

I have this visualization and I'm trying to add fisheye view to the chart. I have tried adding it with the following lines in the plotData function but it doesn't happen:

var fisheye = d3.fisheye.circular()
            .radius(120);

    svg.on("mousemove", function () {
        fisheye.focus(d3.mouse(this));

        circle.each(function (d) {
            d.fisheye = fisheye(d);
        });
    });

Any ideas on how to solve this?

Thanks!

Mark · Accepted Answer · 2015-07-05T00:02:43.720

First things first, your d3.timer never stops running. This is driving my machine crazy (cpu 100%) and killing the performance of the fishey. I'm really not sure what you are doing there, so ignoring that for a moment.

Your fisheye needs a little massaging. First, it expects your data pixel's positions to be stored in d.x and d.y attributes. You can fudge this in with when drawing your circles:

     circle
        .attr("cx", function(d, i) { d.x = X(d[0]); return d.x; })
        .attr("cy", function(d, i){ d.y = Y(d[1]); return d.y; });

Second, you are plotting your data in multiple steps, so you need to select all the circles for the fisheye. And third, you forgot the code that actually makes the points grow and shrink:

svg.on("mousemove", function () {
    fisheye.focus(d3.mouse(this));

    // select all the circles
    d3.selectAll("circle.data").each(function(d) { d.fisheye = fisheye(d); })
      // make them grow and shrink and dance
      .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; });

});

Updated example.

Adding fisheye to axes with D3 JS

1 Answers1