removing old fishey code from scatter, and updating to new fisheye

examples/scatterChart.html

@@ -20,12 +20,12 @@ div {
   margin: 0;
 }
 
-
+/*
 #offsetDiv {
   margin-left: 100px;
   margin-top: 100px;
 }
-
+*/
 
 #test1 {
   margin: 0;

lib/fisheye.js

@@ -1,45 +1,86 @@
 (function() {
-  d3.fisheye = function() {
-    var radius = 200,
-        power = 2,
-        k0,
-        k1,
-        center = [0, 0];
-
-    function fisheye(d) {
-      var dx = d.x - center[0],
-          dy = d.y - center[1],
-          dd = Math.sqrt(dx * dx + dy * dy);
-      if (dd >= radius) return {x: d.x, y: d.y, z: 1};
-      var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
-      return {x: center[0] + dx * k, y: center[1] + dy * k, z: Math.min(k, 10)};
+  d3.fisheye = {
+    scale: function(scaleType) {
+      return d3_fisheye_scale(scaleType(), 3, 0);
+    },
+    circular: function() {
+      var radius = 200,
+          distortion = 2,
+          k0,
+          k1,
+          focus = [0, 0];
+
+      function fisheye(d) {
+        var dx = d.x - focus[0],
+            dy = d.y - focus[1],
+            dd = Math.sqrt(dx * dx + dy * dy);
+        if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1};
+        var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
+        return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
+      }
+
+      function rescale() {
+        k0 = Math.exp(distortion);
+        k0 = k0 / (k0 - 1) * radius;
+        k1 = distortion / radius;
+        return fisheye;
+      }
+
+      fisheye.radius = function(_) {
+        if (!arguments.length) return radius;
+        radius = +_;
+        return rescale();
+      };
+
+      fisheye.distortion = function(_) {
+        if (!arguments.length) return distortion;
+        distortion = +_;
+        return rescale();
+      };
+
+      fisheye.focus = function(_) {
+        if (!arguments.length) return focus;
+        focus = _;
+        return fisheye;
+      };
+
+      return rescale();
     }
+  };
 
-    function rescale() {
-      k0 = Math.exp(power);
-      k0 = k0 / (k0 - 1) * radius;
-      k1 = power / radius;
-      return fisheye;
+  function d3_fisheye_scale(scale, d, a) {
+
+    function fisheye(_) {
+      var x = scale(_),
+          left = x < a,
+          v,
+          range = d3.extent(scale.range()),
+          min = range[0],
+          max = range[1],
+          m = left ? a - min : max - a;
+      if (m == 0) m = max - min;
+      return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
     }
 
-    fisheye.radius = function(_) {
-      if (!arguments.length) return radius;
-      radius = +_;
-      return rescale();
+    fisheye.distortion = function(_) {
+      if (!arguments.length) return d;
+      d = +_;
+      return fisheye;
     };
 
-    fisheye.power = function(_) {
-      if (!arguments.length) return power;
-      power = +_;
-      return rescale();
+    fisheye.focus = function(_) {
+      if (!arguments.length) return a;
+      a = +_;
+      return fisheye;
     };
 
-    fisheye.center = function(_) {
-      if (!arguments.length) return center;
-      center = _;
-      return fisheye;
+    fisheye.copy = function() {
+      return d3_fisheye_scale(scale.copy(), d, a);
     };
 
-    return rescale();
-  };
+    fisheye.nice = scale.nice;
+    fisheye.ticks = scale.ticks;
+    fisheye.tickFormat = scale.tickFormat;
+    return d3.rebind(fisheye, scale, "domain", "range");
+  }
 })();

src/d3.css

@@ -10,6 +10,10 @@
   overflow: hidden;
 }
 
+.nvd3.background {
+  fill: none;
+  pointer-events: none;
+}
 
 
 /********************

src/models/scatter.js

@@ -21,17 +21,12 @@ nv.models.scatter = function() {
       clipEdge = false, // if true, masks lines within x and y scale
       clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance
       clipRadius = function() { return 25 }, // function to get the radius for point clips
-      fisheyeEnabled = false,
-      fisheyeRadius = 150,
       xDomain, yDomain, sizeDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
 
   var dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout'),
       x0, y0, z0,
       timeoutID;
 
-  if (d3.fisheye) 
-    var fisheye = d3.fisheye();
-      //.radius(fisheyeRadius);
 
   function chart(selection) {
     selection.each(function(data) {
@@ -269,37 +264,6 @@ nv.models.scatter = function() {
           //.attr('r', function(d,i) { return z(getSize(d,i)) });
 
 
-      if (fisheyeEnabled) {
-        var fisheyeBox = container.append('rect')
-                          .attr('class', 'fisheyeBox')
-                          .style('fill-opacity', 0)
-                          .style('stroke-opacity', 0)
-                          .attr('width', availableWidth)
-                          .attr('height', availableHeight);
-
-        fisheye.radius(fisheyeRadius);
-
-        fisheyeBox.on("mousemove", function() {
-          if (!fisheyeEnabled) return true;
-
-          fisheye.center(d3.mouse(this));
-
-          points
-              .each(function(d,i) { d.display = fisheye({x: x(getX(d,i)), y: y(getY(d,i)) }); })
-              .attr('transform', function(d,i) {
-                return 'translate(' + d.display.x + ',' + d.display.y + ')'
-              })
-              .attr('d',
-                    d3.svg.symbol()
-                      .type(function(d,i) { return d.shape || shape })
-                      .size(function(d,i) { return z(getSize(d,i)) * d.display.z })
-                   );
-        });
-
-      } else {
-        container.select('.fisheyeBox').remove();
-      }
-
 
       clearTimeout(timeoutID);
       timeoutID = setTimeout(updateInteractiveLayer, 750);
@@ -449,18 +413,6 @@ nv.models.scatter = function() {
     return chart;
   };
 
-  chart.fisheye = function(_) {
-    if (!arguments.length) return fisheyeEnabled;
-    fisheyeEnabled = _;
-    return chart;
-  };
-
-  chart.fisheyeRadius = function(_) {
-    if (!arguments.length) return fisheyeRadius;
-    fisheyeRadius = _;
-    return chart;
-  };
-
 
   return chart;
 }