Skip to content

Instantly share code, notes, and snippets.

@bbassett
Created August 19, 2015 21:00
Show Gist options
  • Save bbassett/4895257c97e67d84735f to your computer and use it in GitHub Desktop.
Save bbassett/4895257c97e67d84735f to your computer and use it in GitHub Desktop.
import Feature from './feature?force-load'
import * as d3 from 'd3'
svg(width=props.width height=props.height ref="svg").map
each feature in props.features
Feature(feature=feature
color=props.color
d=props.path(feature)
numOptions=props.numOptions
onMouseMove=props.onMouseMove
onMouseOut=props.onMouseLeave
onMouseEnter=props.onMouseOver.bind(null, feature.properties)
onMouseDown=props.onMouseDown
onMouseUp=props.onMouseUp.bind(null, feature.properties)
class={'clickable-feature': props.clickable}
).feature
export.
function onMouseDown(properties, callback) {
var move = false;
if (move) return;
return callback.bind(null, properties);
}
export.
function shouldComponentUpdate(props) {
if (!props.features || !this.props.features) return true;
if (props.color !== this.props.color) return true;
return props.features.length !== this.props.features.length;
}
export.
function componentWillUnmount() {
this.getDOMNode().removeEventListener('zoom', this.zoom);
}
export.
function componentDidMount() {
if (!process.env.FEATURE_MAP_ZOOM) return
var self = this;
var svg = self.svg = d3.select(self.getDOMNode());
self.paths = svg.selectAll('path');
var minScale = 0.75;
var maxScale = 12;
var zoom = d3.behavior.zoom()
.scaleExtent([minScale, maxScale])
.on('zoom', this.zoom = function() {
var event = d3.event;
var s = event.scale;
var t = event.translate;
self.zoomHandler(zoom, s, t);
});
svg.call(zoom);
}
export.
function componentDidUpdate() {
if(!this.svg) return;
this.paths = this.svg.selectAll('path');
}
export.
function zoomHandler(zoom, s, t){
var w = this.props.width;
var h = this.props.height;
t[0] = Math.min((w * s * 0.8), Math.max((w * s * -0.8), t[0]));
t[1] = Math.min(h * (s - 0.5), Math.max(h / 2 * (1 - s) - h / 2 * s, t[1]));
zoom.translate(t);
this.paths.attr("transform", "translate(" + t + ")scale(" + s + ")" );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment