Sha256: 608a7c44c71a438db3564a5429a0bf3871c62e3eee6dc3499f2edacc950f49ac
Contents?: true
Size: 1.96 KB
Versions: 13
Compression:
Stored size: 1.96 KB
Contents
# Fisheye Distortion
Demo: <http://bost.ocks.org/mike/fisheye/>
Implements a fisheye distortion for two-dimensional layouts. Based on Sarkar and Brown’s [Graphical Fisheye Views of Graphs](http://dl.acm.org/citation.cfm?id=142763) (CHI '92), as well as [Flare](http://flare.prefuse.org/)'s [FisheyeDistortion](http://flare.prefuse.org/api/flare/vis/operator/distortion/FisheyeDistortion.html) and [Sigma.js](http://sigmajs.org/)'s [fisheye example](http://sigmajs.org/examples/a_plugin_example_advanced.html).
When constructing a fisheye distortion, you can specify the radius and distortion factor:
```js
var fisheye = d3.fisheye.circular()
.radius(200)
.distortion(2);
```
Typically, you then update the focal point of the distortion on mousemove:
```js
svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
});
```
The distortion operator takes as input an object with `x` and `y` attributes, and returns a new object with `x`, `y` and `z` attributes. The returned object represents the distorted position of the input object; the `z` property is a scaling factor so that you can optionally distort the size of elements as well.
For example, to apply fisheye distortion to a force layout, stash the distorted positions in a `display` property on each node, and then use the distorted positions to update the nodes and links:
```js
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.z * 4.5; });
link.attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});
```
There's also a d3.fisheye.scale for Cartesian distortion; see the above demo for an example.
Version data entries
13 entries across 13 versions & 1 rubygems