From cf8f7ca21a2d34877dfb25883cd6984308a7bf5e Mon Sep 17 00:00:00 2001 From: Bob Monteverde Date: Fri, 22 Jun 2012 14:56:15 -0400 Subject: [PATCH] removing old fishey code from scatter, and updating to new fisheye --- {examples => deprecated}/lineChartDaily.html | 0 examples/scatterChart.html | 4 +- lib/fisheye.js | 107 +++++++++++++------ src/d3.css | 4 + src/models/scatter.js | 48 --------- 5 files changed, 80 insertions(+), 83 deletions(-) rename {examples => deprecated}/lineChartDaily.html (100%) diff --git a/examples/lineChartDaily.html b/deprecated/lineChartDaily.html similarity index 100% rename from examples/lineChartDaily.html rename to deprecated/lineChartDaily.html diff --git a/examples/scatterChart.html b/examples/scatterChart.html index bb5f914..74e9125 100644 --- a/examples/scatterChart.html +++ b/examples/scatterChart.html @@ -20,12 +20,12 @@ div { margin: 0; } - +/* #offsetDiv { margin-left: 100px; margin-top: 100px; } - +*/ #test1 { margin: 0; diff --git a/lib/fisheye.js b/lib/fisheye.js index 6de2b88..e1addd7 100644 --- a/lib/fisheye.js +++ b/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"); + } })(); diff --git a/src/d3.css b/src/d3.css index ff880ae..c6ba026 100644 --- a/src/d3.css +++ b/src/d3.css @@ -10,6 +10,10 @@ overflow: hidden; } +.nvd3.background { + fill: none; + pointer-events: none; +} /******************** diff --git a/src/models/scatter.js b/src/models/scatter.js index d359a38..e500852 100644 --- a/src/models/scatter.js +++ b/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; }