d3 bubble chart with fisheye

Question

I'm trying to implement the fish-eye plugin distortion with a bubble chart.

I've made all the approaches for this, using the documentation and other examples.

Using:

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

    node.each(function (d) {
        d.fisheye = fisheye(d);
    })
        .attr("r", function (d) {
        return d.fisheye.r * 2;
    });
});

and

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

See my fiddle with an example.

Applying this to the browser nothing append when I pass the mouse over the bubbles.

NOTE: I've tried to add the cx and cy attribute in the fisheye call but my graph don't have this two coordinates implemented. Is that the reason?

Example:

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

        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.r * 2;
        });
    });

Is there any solution for this or I'm trying to implement something that is not possible at this time?

Many thanks, Filipe

score 1 · Accepted Answer · answered Feb 16 '15 at 16:26

Changing the attributes doesn't update the graphics automatically. You need to redraw the svg using the new fisheyed attributes. Here is your updated fiddle.

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

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

     node.selectAll("circle")
          .attr("cx", function(d) { return d.fisheye.x - d.x; })
          .attr("cy", function(d) { return d.fisheye.y - d.y; })
          .attr("r", function(d) { return d.fisheye.z * d.r; });

      node.selectAll("text")
          .attr("dx", function(d) { return d.fisheye.x - d.x; })
          .attr("dy", function(d) { return d.fisheye.y - d.y; });
});

d3 bubble chart with fisheye

1 Answers1