Begin d3 v4 update

2026-05-17 14:23:38 +02:00 · 2016-08-12 10:29:00 -04:00
parent 36a90b4f86
commit cdb533fa84
137 changed files with 842 additions and 6691 deletions
@@ -12,7 +12,7 @@ changes;
 which provides a callback-based [Observer
 pattern](http://en.wikipedia.org/wiki/Observer_pattern) between different
 parts of iD;
-[d3.geo.path](https://github.com/mbostock/d3/wiki/Geo-Paths#wiki-path), which
+[d3.geoPath](https://github.com/mbostock/d3/wiki/Geo-Paths#wiki-path), which
 generates SVG paths for lines and areas; and
 [d3.behavior.zoom](https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-zoom),
 which implements map panning and zooming.
@@ -12,7 +12,6 @@
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />

-        <script src='js/lib/d3.v3.js'></script>
        <script src='dist/iD.js'></script>
    </head>
    <body>
@@ -24,24 +23,23 @@
            .taginfo(iD.services.taginfo.init())
            .assetPath('dist/');

-        d3.select('#id-container')
-            .call(id.ui());
+        id.ui()(document.getElementById('id-container'));

-        d3.select('#about-list').insert('li', '.user-list')
-            .attr('class', 'source-switch')
-            .call(iD.ui.SourceSwitch(id)
-                .keys([
-                    {
-                        'url': 'http://www.openstreetmap.org',
-                        'oauth_consumer_key': '5A043yRSEugj4DJ5TljuapfnrflWDte8jTOcWLlT',
-                        'oauth_secret': 'aB3jKq1TRsCOUrfOIZ6oQMEDmv2ptV76PA54NGLL'
-                    },
-                    {
-                        'url': 'http://api06.dev.openstreetmap.org',
-                        'oauth_consumer_key': 'zwQZFivccHkLs3a8Rq5CoS412fE5aPCXDw9DZj7R',
-                        'oauth_secret': 'aMnOOCwExO2XYtRVWJ1bI9QOdqh1cay2UgpbhA6p'
-                    }
-                ]));
+        // d3.select('#about-list').insert('li', '.user-list')
+        //     .attr('class', 'source-switch')
+        //     .call(iD.ui.SourceSwitch(id)
+        //         .keys([
+        //             {
+        //                 'url': 'http://www.openstreetmap.org',
+        //                 'oauth_consumer_key': '5A043yRSEugj4DJ5TljuapfnrflWDte8jTOcWLlT',
+        //                 'oauth_secret': 'aB3jKq1TRsCOUrfOIZ6oQMEDmv2ptV76PA54NGLL'
+        //             },
+        //             {
+        //                 'url': 'http://api06.dev.openstreetmap.org',
+        //                 'oauth_consumer_key': 'zwQZFivccHkLs3a8Rq5CoS412fE5aPCXDw9DZj7R',
+        //                 'oauth_secret': 'aMnOOCwExO2XYtRVWJ1bI9QOdqh1cay2UgpbhA6p'
+        //             }
+        //         ]));
        </script>
    </body>
 </html>
@@ -1,48 +0,0 @@
-(function() {
-
-  // get a reference to the d3.selection prototype,
-  // and keep a reference to the old d3.selection.on
-  var d3_selectionPrototype = d3.selection.prototype,
-      d3_on = d3_selectionPrototype.on;
-
-  // our shims are organized by event:
-  // "desired-event": ["shimmed-event", wrapperFunction]
-  var shims = {
-    "mouseenter": ["mouseover", relatedTarget],
-    "mouseleave": ["mouseout", relatedTarget]
-  };
-
-  // rewrite the d3.selection.on function to shim the events with wrapped
-  // callbacks
-  d3_selectionPrototype.on = function(evt, callback, useCapture) {
-    var bits = evt.split("."),
-        type = bits.shift(),
-        shim = shims[type];
-    if (shim) {
-      evt = bits.length ? [shim[0], bits].join(".") : shim[0];
-      if (typeof callback === "function") {
-        callback = shim[1](callback);
-      }
-      return d3_on.call(this, evt, callback, useCapture);
-    } else {
-      return d3_on.apply(this, arguments);
-    } 
-  };
-
-  function relatedTarget(callback) {
-    return function() {
-      var related = d3.event.relatedTarget;
-      if (this === related || childOf(this, related)) {
-        return undefined;
-      }
-      return callback.apply(this, arguments);
-    };
-  }
-
-  function childOf(p, c) {
-    if (p === c) return false;
-    while (c && c !== p) c = c.parentNode;
-    return c === p;
-  }
-
-})();
@@ -1,4 +1,7 @@
-d3.combobox = function() {
+import { rebind } from '../../modules/util/rebind';
+import * as d3 from 'd3';
+
+export function d3combobox() {
    var event = d3.dispatch('accept'),
        data = [],
        suggestions = [],
@@ -280,10 +283,10 @@ d3.combobox = function() {
        return combobox;
    };

-    return d3.rebind(combobox, event, 'on');
+    return rebind(combobox, event, 'on');
 };

-d3.combobox.off = function(input) {
+d3combobox.off = function(input) {
    input
        .on('focus.typeahead', null)
        .on('blur.typeahead', null)
@@ -298,4 +301,4 @@ d3.combobox.off = function(input) {

    d3.select(document.body)
        .on('scroll.combobox', null);
-};
+}
@@ -1,23 +0,0 @@
-d3.selection.prototype.dimensions = function (dimensions) {
-    var refresh = (function(node) {
-        var cr = node.getBoundingClientRect();
-        var prop = [cr.width, cr.height];
-        this.property('__dimensions__', prop);
-        return prop;
-    }).bind(this);
-
-    var node = this.node();
-
-    if (!arguments.length) {
-        if (!node) return [0,0];
-        return this.property('__dimensions__') || refresh(node);
-    }
-    if (dimensions === null) {
-        if (!node) return [0,0];
-        return refresh(node);
-    }
-
-    return this
-        .property('__dimensions__', [dimensions[0], dimensions[1]])
-        .attr({width: dimensions[0], height: dimensions[1]});
-};
@@ -1,4 +1,6 @@
-d3.geo.tile = function() {
+import * as d3 from 'd3';
+
+export function d3geoTile() {
  var size = [960, 500],
      scale = 256,
      scaleExtent = [0, 20],
@@ -61,4 +63,4 @@ d3.geo.tile = function() {
  };

  return tile;
-};
+}
@@ -1,3 +1,6 @@
+import * as d3 from 'd3';
+
+
 /*
 * This code is licensed under the MIT license.
 *
@@ -7,7 +10,7 @@
 * See https://github.com/keithamus/jwerty
 *
 */
-d3.keybinding = function(namespace) {
+export function d3keybinding(namespace) {
    var bindings = [];

    function matches(binding, event) {
@@ -74,10 +77,10 @@ d3.keybinding = function(namespace) {
            // Normalise matching errors
            if (code[i] === '++') code[i] = '+';

-            if (code[i] in d3.keybinding.modifierCodes) {
-                binding.event[d3.keybinding.modifierProperties[d3.keybinding.modifierCodes[code[i]]]] = true;
-            } else if (code[i] in d3.keybinding.keyCodes) {
-                binding.event.keyCode = d3.keybinding.keyCodes[code[i]];
+            if (code[i] in d3keybinding.modifierCodes) {
+                binding.event[d3keybinding.modifierProperties[d3keybinding.modifierCodes[code[i]]]] = true;
+            } else if (code[i] in d3keybinding.keyCodes) {
+                binding.event.keyCode = d3keybinding.keyCodes[code[i]];
            }
        }

@@ -89,120 +92,118 @@ d3.keybinding = function(namespace) {
    return keybinding;
 };

-(function () {
-    d3.keybinding.modifierCodes = {
-        // Shift key, ⇧
-        '⇧': 16, shift: 16,
-        // CTRL key, on Mac: ⌃
-        '⌃': 17, ctrl: 17,
-        // ALT key, on Mac: ⌥ (Alt)
-        '⌥': 18, alt: 18, option: 18,
-        // META, on Mac: ⌘ (CMD), on Windows (Win), on Linux (Super)
-        '⌘': 91, meta: 91, cmd: 91, 'super': 91, win: 91
-    };
+d3keybinding.modifierCodes = {
+    // Shift key, ⇧
+    '⇧': 16, shift: 16,
+    // CTRL key, on Mac: ⌃
+    '⌃': 17, ctrl: 17,
+    // ALT key, on Mac: ⌥ (Alt)
+    '⌥': 18, alt: 18, option: 18,
+    // META, on Mac: ⌘ (CMD), on Windows (Win), on Linux (Super)
+    '⌘': 91, meta: 91, cmd: 91, 'super': 91, win: 91
+};

-    d3.keybinding.modifierProperties = {
-        16: 'shiftKey',
-        17: 'ctrlKey',
-        18: 'altKey',
-        91: 'metaKey'
-    };
+d3keybinding.modifierProperties = {
+    16: 'shiftKey',
+    17: 'ctrlKey',
+    18: 'altKey',
+    91: 'metaKey'
+};

-    d3.keybinding.keyCodes = {
-        // Backspace key, on Mac: ⌫ (Backspace)
-        '⌫': 8, backspace: 8,
-        // Tab Key, on Mac: ⇥ (Tab), on Windows ⇥⇥
-        '⇥': 9, '⇆': 9, tab: 9,
-        // Return key, ↩
-        '↩': 13, 'return': 13, enter: 13, '⌅': 13,
-        // Pause/Break key
-        'pause': 19, 'pause-break': 19,
-        // Caps Lock key, ⇪
-        '⇪': 20, caps: 20, 'caps-lock': 20,
-        // Escape key, on Mac: ⎋, on Windows: Esc
-        '⎋': 27, escape: 27, esc: 27,
-        // Space key
-        space: 32,
-        // Page-Up key, or pgup, on Mac: ↖
-        '↖': 33, pgup: 33, 'page-up': 33,
-        // Page-Down key, or pgdown, on Mac: ↘
-        '↘': 34, pgdown: 34, 'page-down': 34,
-        // END key, on Mac: ⇟
-        '⇟': 35, end: 35,
-        // HOME key, on Mac: ⇞
-        '⇞': 36, home: 36,
-        // Insert key, or ins
-        ins: 45, insert: 45,
-        // Delete key, on Mac: ⌦ (Delete)
-        '⌦': 46, del: 46, 'delete': 46,
-        // Left Arrow Key, or ←
-        '←': 37, left: 37, 'arrow-left': 37,
-        // Up Arrow Key, or ↑
-        '↑': 38, up: 38, 'arrow-up': 38,
-        // Right Arrow Key, or →
-        '→': 39, right: 39, 'arrow-right': 39,
-        // Up Arrow Key, or ↓
-        '↓': 40, down: 40, 'arrow-down': 40,
-        // odities, printing characters that come out wrong:
-        // Firefox Equals
-        'ffequals': 61,
-        // Num-Multiply, or *
-        '*': 106, star: 106, asterisk: 106, multiply: 106,
-        // Num-Plus or +
-        '+': 107, 'plus': 107,
-        // Num-Subtract, or -
-        '-': 109, subtract: 109,
-        // Firefox Plus
-        'ffplus': 171,
-        // Firefox Minus
-        'ffminus': 173,
-        // Semicolon
-        ';': 186, semicolon: 186,
-        // = or equals
-        '=': 187, 'equals': 187,
-        // Comma, or ,
-        ',': 188, comma: 188,
-        'dash': 189, //???
-        // Period, or ., or full-stop
-        '.': 190, period: 190, 'full-stop': 190,
-        // Slash, or /, or forward-slash
-        '/': 191, slash: 191, 'forward-slash': 191,
-        // Tick, or `, or back-quote
-        '`': 192, tick: 192, 'back-quote': 192,
-        // Open bracket, or [
-        '[': 219, 'open-bracket': 219,
-        // Back slash, or \
-        '\\': 220, 'back-slash': 220,
-        // Close backet, or ]
-        ']': 221, 'close-bracket': 221,
-        // Apostrophe, or Quote, or '
-        '\'': 222, quote: 222, apostrophe: 222
-    };
+d3keybinding.keyCodes = {
+    // Backspace key, on Mac: ⌫ (Backspace)
+    '⌫': 8, backspace: 8,
+    // Tab Key, on Mac: ⇥ (Tab), on Windows ⇥⇥
+    '⇥': 9, '⇆': 9, tab: 9,
+    // Return key, ↩
+    '↩': 13, 'return': 13, enter: 13, '⌅': 13,
+    // Pause/Break key
+    'pause': 19, 'pause-break': 19,
+    // Caps Lock key, ⇪
+    '⇪': 20, caps: 20, 'caps-lock': 20,
+    // Escape key, on Mac: ⎋, on Windows: Esc
+    '⎋': 27, escape: 27, esc: 27,
+    // Space key
+    space: 32,
+    // Page-Up key, or pgup, on Mac: ↖
+    '↖': 33, pgup: 33, 'page-up': 33,
+    // Page-Down key, or pgdown, on Mac: ↘
+    '↘': 34, pgdown: 34, 'page-down': 34,
+    // END key, on Mac: ⇟
+    '⇟': 35, end: 35,
+    // HOME key, on Mac: ⇞
+    '⇞': 36, home: 36,
+    // Insert key, or ins
+    ins: 45, insert: 45,
+    // Delete key, on Mac: ⌦ (Delete)
+    '⌦': 46, del: 46, 'delete': 46,
+    // Left Arrow Key, or ←
+    '←': 37, left: 37, 'arrow-left': 37,
+    // Up Arrow Key, or ↑
+    '↑': 38, up: 38, 'arrow-up': 38,
+    // Right Arrow Key, or →
+    '→': 39, right: 39, 'arrow-right': 39,
+    // Up Arrow Key, or ↓
+    '↓': 40, down: 40, 'arrow-down': 40,
+    // odities, printing characters that come out wrong:
+    // Firefox Equals
+    'ffequals': 61,
+    // Num-Multiply, or *
+    '*': 106, star: 106, asterisk: 106, multiply: 106,
+    // Num-Plus or +
+    '+': 107, 'plus': 107,
+    // Num-Subtract, or -
+    '-': 109, subtract: 109,
+    // Firefox Plus
+    'ffplus': 171,
+    // Firefox Minus
+    'ffminus': 173,
+    // Semicolon
+    ';': 186, semicolon: 186,
+    // = or equals
+    '=': 187, 'equals': 187,
+    // Comma, or ,
+    ',': 188, comma: 188,
+    'dash': 189, //???
+    // Period, or ., or full-stop
+    '.': 190, period: 190, 'full-stop': 190,
+    // Slash, or /, or forward-slash
+    '/': 191, slash: 191, 'forward-slash': 191,
+    // Tick, or `, or back-quote
+    '`': 192, tick: 192, 'back-quote': 192,
+    // Open bracket, or [
+    '[': 219, 'open-bracket': 219,
+    // Back slash, or \
+    '\\': 220, 'back-slash': 220,
+    // Close backet, or ]
+    ']': 221, 'close-bracket': 221,
+    // Apostrophe, or Quote, or '
+    '\'': 222, quote: 222, apostrophe: 222
+};

-    // NUMPAD 0-9
-    var i = 95, n = 0;
-    while (++i < 106) {
-        d3.keybinding.keyCodes['num-' + n] = i;
-        ++n;
-    }
+// NUMPAD 0-9
+var i = 95, n = 0;
+while (++i < 106) {
+    d3keybinding.keyCodes['num-' + n] = i;
+    ++n;
+}

-    // 0-9
-    i = 47; n = 0;
-    while (++i < 58) {
-        d3.keybinding.keyCodes[n] = i;
-        ++n;
-    }
+// 0-9
+i = 47; n = 0;
+while (++i < 58) {
+    d3keybinding.keyCodes[n] = i;
+    ++n;
+}

-    // F1-F25
-    i = 111; n = 1;
-    while (++i < 136) {
-        d3.keybinding.keyCodes['f' + n] = i;
-        ++n;
-    }
+// F1-F25
+i = 111; n = 1;
+while (++i < 136) {
+    d3keybinding.keyCodes['f' + n] = i;
+    ++n;
+}

-    // a-z
-    i = 64;
-    while (++i < 91) {
-        d3.keybinding.keyCodes[String.fromCharCode(i).toLowerCase()] = i;
-    }
-})();
+// a-z
+i = 64;
+while (++i < 91) {
+    d3keybinding.keyCodes[String.fromCharCode(i).toLowerCase()] = i;
+}
@@ -1,9 +0,0 @@
-require('./d3.combobox');
-require('./d3.geo.tile');
-require('./d3.keybinding');
-require('./d3.one');
-require('./d3.dimensions');
-require('./d3.trigger');
-require('./d3.curtain');
-require('./d3.value');
-require('./d3-compat');
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { euclideanDistance, interp } from '../geo/index';
 import { Node } from '../core/index';
 import _ from 'lodash';
@@ -17,9 +18,9 @@ export function Circularize(wayId
            keyNodes = nodes.filter(function(n) { return graph.parentWays(n).length !== 1; }),
            points = nodes.map(function(n) { return projection(n.loc); }),
            keyPoints = keyNodes.map(function(n) { return projection(n.loc); }),
-            centroid = (points.length === 2) ? interp(points[0], points[1], 0.5) : d3.geom.polygon(points).centroid(),
+            centroid = (points.length === 2) ? interp(points[0], points[1], 0.5) : d3.geoCentroid({ type: 'Polygon', coordinates: points }),
            radius = d3.median(points, function(p) { return euclideanDistance(centroid, p); }),
-            sign = d3.geom.polygon(points).area() > 0 ? 1 : -1,
+            sign = d3.polygonArea(points) > 0 ? 1 : -1,
            ids;

        // we need atleast two key nodes for the algorithm to work
@@ -151,8 +152,8 @@ export function Circularize(wayId
        var way = graph.entity(wayId),
            nodes = _.uniq(graph.childNodes(way)),
            points = nodes.map(function(n) { return projection(n.loc); }),
-            sign = d3.geom.polygon(points).area() > 0 ? 1 : -1,
-            hull = d3.geom.hull(points);
+            sign = d3.polygonArea(points) > 0 ? 1 : -1,
+            hull = d3.polygonHull(points);

        // D3 convex hulls go counterclockwise..
        if (sign === -1) {
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { Browse } from '../modes/index';
 import { Draw } from './draw';

@@ -35,5 +37,5 @@ export function AddWay(context) {
        return addWay;
    };

-    return d3.rebind(addWay, event, 'on');
+    return rebind(addWay, event, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 export function Breathe(){
    var duration = 800,
@@ -1,7 +1,9 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { cmd } from '../ui/index';
 export function Copy(context) {
-    var keybinding = d3.keybinding('copy');
+    var keybinding = d3keybinding('copy');

    function groupEntities(ids, graph) {
        var entities = ids.map(function (id) { return graph.entity(id); });
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { prefixCSSProperty, prefixDOMProperty } from '../util/index';
 /*
    `iD.behavior.drag` is like `d3.behavior.drag`, with the following differences:
@@ -31,11 +33,12 @@ export function drag() {
      return function(e1) {
        var e0 = e1.sourceEvent = d3.event;
        e1.target = drag;
-        d3.event = e1;
+        // TODO
+        // d3.event = e1;
        try {
          event[e1.type].apply(thiz, argumentz);
        } finally {
-          d3.event = e0;
+          // d3.event = e0;
        }
      };
    };
@@ -59,7 +62,7 @@ export function drag() {

    function mousedown() {
        target = this;
-        event_ = event.of(target, arguments);
+        event_ = event.call("of", target, arguments);
        var eventTarget = d3.event.target,
            touchId = d3.event.touches ? d3.event.changedTouches[0].identifier : null,
            offset,
@@ -188,7 +191,7 @@ export function drag() {
    drag.target = function() {
        if (!arguments.length) return target;
        target = arguments[0];
-        event_ = event.of(target, Array.prototype.slice.call(arguments, 1));
+        event_ = event.call("of", target, Array.prototype.slice.call(arguments, 1));
        return drag;
    };

@@ -198,5 +201,5 @@ export function drag() {
        return drag;
    };

-    return d3.rebind(drag, event, 'on');
+    return rebind(drag, event, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../util/rebind';
+import { getDimensions } from '../util/dimensions';
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { chooseEdge, euclideanDistance } from '../geo/index';
 import { Edit } from './edit';
 import { Hover } from './hover';
@@ -6,7 +10,7 @@ import { Tail } from './tail';
 export function Draw(context) {
    var event = d3.dispatch('move', 'click', 'clickWay',
            'clickNode', 'undo', 'cancel', 'finish'),
-        keybinding = d3.keybinding('draw'),
+        keybinding = d3keybinding('draw'),
        hover = Hover(context)
            .altDisables(true)
            .on('hover', context.ui().sidebar.hover),
@@ -72,7 +76,7 @@ export function Draw(context) {

    function mousemove() {
        lastMouse = d3.event;
-        event.move(datum());
+        event.call("move", datum());
    }

    function mouseenter() {
@@ -86,7 +90,7 @@ export function Draw(context) {
    function click() {
        var d = datum();
        if (d.type === 'way') {
-            var dims = context.map().dimensions(),
+            var dims = getDimensions(context.map()),
                mouse = context.mouse(),
                pad = 5,
                trySnap = mouse[0] > pad && mouse[0] < dims[0] - pad &&
@@ -95,16 +99,16 @@ export function Draw(context) {
            if (trySnap) {
                var choice = chooseEdge(context.childNodes(d), context.mouse(), context.projection),
                    edge = [d.nodes[choice.index - 1], d.nodes[choice.index]];
-                event.clickWay(choice.loc, edge);
+                event.call("clickWay", choice.loc, edge);
            } else {
-                event.click(context.map().mouseCoordinates());
+                event.call("click", context.map().mouseCoordinates());
            }

        } else if (d.type === 'node') {
-            event.clickNode(d);
+            event.call("clickNode", d);

        } else {
-            event.click(context.map().mouseCoordinates());
+            event.call("click", context.map().mouseCoordinates());
        }
    }

@@ -134,17 +138,17 @@ export function Draw(context) {

    function backspace() {
        d3.event.preventDefault();
-        event.undo();
+        event.call("undo");
    }

    function del() {
        d3.event.preventDefault();
-        event.cancel();
+        event.call("cancel");
    }

    function ret() {
        d3.event.preventDefault();
-        event.finish();
+        event.call("finish");
    }

    function draw(selection) {
@@ -204,7 +208,7 @@ export function Draw(context) {
        return draw;
    };

-    return d3.rebind(draw, event, 'on');
+    return rebind(draw, event, 'on');
 }

 Draw.usedTails = {};
@@ -1,11 +1,13 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { getDimensions } from '../util/dimensions';
 import _ from 'lodash';
 import { AddEntity, AddMidpoint, AddVertex, MoveNode } from '../actions/index';
 import { Browse, Select } from '../modes/index';
 import { Node, Way } from '../core/index';
 import { chooseEdge, edgeEqual } from '../geo/index';
 import { Draw } from './draw';
-import { entitySelector } from '../util/index';
+import { entitySelector, functor } from '../util/index';

 export function DrawWay(context, wayId, index, mode, baseGraph) {
    var way = context.entity(wayId),
@@ -41,7 +43,7 @@ export function DrawWay(context, wayId, index, mode, baseGraph) {
            loc = datum.loc;

        } else if (datum.type === 'way' && datum.id !== segment.id) {
-            var dims = context.map().dimensions(),
+            var dims = getDimensions(context.map()),
                mouse = context.mouse(),
                pad = 5,
                trySnap = mouse[0] > pad && mouse[0] < dims[0] - pad &&
@@ -199,7 +201,7 @@ export function DrawWay(context, wayId, index, mode, baseGraph) {
    // Cancel the draw operation and return to browse, deleting everything drawn.
    drawWay.cancel = function() {
        context.perform(
-            d3.functor(baseGraph),
+            functor(baseGraph),
            t('operations.cancel_draw.annotation'));

        window.setTimeout(function() {
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { qsString, stringQs } from '../util/index';
 export function Hash(context) {
@@ -1,3 +1,6 @@
+import { rebind } from '../util/rebind';
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { Entity } from '../core/index';
 /*
   The hover behavior adds the `.hover` class on mouseover to all elements to which
@@ -15,8 +18,8 @@ export function Hover() {
        target;

    function keydown() {
-        if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) {
-            dispatch.hover(null);
+        if (altDisables && d3.event.keyCode === d3keybinding.modifierCodes.alt) {
+            dispatch.call("hover", this, null);
            selection.selectAll('.hover')
                .classed('hover-suppressed', true)
                .classed('hover', false);
@@ -24,8 +27,8 @@ export function Hover() {
    }

    function keyup() {
-        if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) {
-            dispatch.hover(target ? target.id : null);
+        if (altDisables && d3.event.keyCode === d3keybinding.modifierCodes.alt) {
+            dispatch.call("hover", this, target ? target.id : null);
            selection.selectAll('.hover-suppressed')
                .classed('hover-suppressed', false)
                .classed('hover', true);
@@ -59,9 +62,9 @@ export function Hover() {
                selection.selectAll(selector)
                    .classed(suppressed ? 'hover-suppressed' : 'hover', true);

-                dispatch.hover(target.id);
+                dispatch.call("hover", this, target.id);
            } else {
-                dispatch.hover(null);
+                dispatch.call("hover", this, null);
            }
        }

@@ -124,5 +127,5 @@ export function Hover() {
        return hover;
    };

-    return d3.rebind(hover, dispatch, 'on');
+    return rebind(hover, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, pointInPolygon } from '../geo/index';
 import { Select } from '../modes/index';
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { ChangeTags, CopyEntities, Move as MoveAction} from '../actions/index';
 import { Extent, pointInPolygon } from '../geo/index';
@@ -5,7 +7,7 @@ import { Move as MoveMode } from '../modes/index';
 import { cmd } from '../ui/index';

 export function Paste(context) {
-    var keybinding = d3.keybinding('paste');
+    var keybinding = d3keybinding('paste');

    function omitTag(v, k) {
        return (
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Browse, Select as SelectMode } from '../modes/index';
 import { Entity } from '../core/index';
@@ -1,4 +1,6 @@
+import * as d3 from 'd3';
 import { setTransform } from '../util/index';
+import { getDimensions } from '../util/dimensions';
 export function Tail() {
    var text,
        container,
@@ -10,11 +12,11 @@ export function Tail() {
        if (!text) return;

        d3.select(window)
-            .on('resize.tail', function() { selectionSize = selection.dimensions(); });
+            .on('resize.tail', function() { selectionSize = getDimensions(selection); });

        function show() {
            container.style('display', 'block');
-            tooltipSize = container.dimensions();
+            tooltipSize = getDimensions(container);
        }

        function mousemove() {
@@ -53,8 +55,8 @@ export function Tail() {
        container
            .on('mousemove.tail', mousemove);

-        tooltipSize = container.dimensions();
-        selectionSize = selection.dimensions();
+        tooltipSize = getDimensions(container);
+        selectionSize = getDimensions(selection);
    }

    tail.off = function(selection) {
@@ -1,3 +1,7 @@
+import { rebind } from '../util/rebind';
+import { functor } from '../util/index';
+import { d3geoTile } from '../../js/lib/d3.geo.tile';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Detect } from '../util/detect';
 import { Entity } from './entity';
@@ -102,11 +106,11 @@ export function Connection(useHttps) {
    };

    function authenticating() {
-        event.authenticating();
+        event.call("authenticating");
    }

    function authenticated() {
-        event.authenticated();
+        event.call("authenticated");
    }

    function getLoc(attrs) {
@@ -298,7 +302,7 @@ export function Connection(useHttps) {
                        method: 'PUT',
                        path: '/api/0.6/changeset/' + changeset_id + '/close',
                        options: { header: { 'Content-Type': 'text/xml' } }
-                    }, d3.functor(true));
+                    }, functor(true));
                });
            });
    };
@@ -378,7 +382,7 @@ export function Connection(useHttps) {
                s / 2 - projection.translate()[0],
                s / 2 - projection.translate()[1]];

-        var tiles = d3.geo.tile()
+        var tiles = d3geoTile()
            .scaleExtent([tileZoom, tileZoom])
            .scale(s)
            .size(dimensions)
@@ -413,7 +417,7 @@ export function Connection(useHttps) {
            if (loadedTiles[id] || inflight[id]) return;

            if (_.isEmpty(inflight)) {
-                event.loading();
+                event.call("loading");
            }

            inflight[id] = connection.loadFromURL(bboxUrl(tile), function(err, parsed) {
@@ -423,7 +427,7 @@ export function Connection(useHttps) {
                if (callback) callback(err, _.extend({data: parsed}, tile));

                if (_.isEmpty(inflight)) {
-                    event.loaded();
+                    event.call("loaded");
                }
            });
        });
@@ -435,7 +439,7 @@ export function Connection(useHttps) {
            loading: authenticating,
            done: authenticated
        }, options));
-        event.auth();
+        event.call("auth");
        connection.flush();
        return connection;
    };
@@ -462,18 +466,18 @@ export function Connection(useHttps) {
    connection.logout = function() {
        userDetails = undefined;
        oauth.logout();
-        event.auth();
+        event.call("auth");
        return connection;
    };

    connection.authenticate = function(callback) {
        userDetails = undefined;
        function done(err, res) {
-            event.auth();
+            event.call("auth");
            if (callback) callback(err, res);
        }
        return oauth.authenticate(done);
    };

-    return d3.rebind(connection, event, 'on');
+    return rebind(connection, event, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { t, addTranslation, setLocale } from '../util/locale';
 import _ from 'lodash';
 import { Background } from '../renderer/background';
@@ -170,12 +172,12 @@ export function Context(root) {
    context.enter = function(newMode) {
        if (mode) {
            mode.exit();
-            dispatch.exit(mode);
+            dispatch.call("exit", this, mode);
        }

        mode = newMode;
        mode.enter();
-        dispatch.enter(mode);
+        dispatch.call("enter", this, mode);
    };

    context.selectedIDs = function() {
@@ -251,7 +253,7 @@ export function Context(root) {
    context.setDebug = function(flag, val) {
        if (arguments.length === 1) val = true;
        debugFlags[flag] = val;
-        dispatch.change();
+        dispatch.call("change");
        return context;
    };
    context.getDebug = function(flag) {
@@ -399,6 +401,6 @@ export function Context(root) {

    presets = presetsInit();

-    return d3.rebind(context, dispatch, 'on');
+    return rebind(context, dispatch, 'on');
 }

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 /*
    iD.Difference represents the difference between two graphs.
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { debug } from '../index';
 import { interestingTag } from './tags';
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import * as Validations from '../validations/index';
 import { Difference } from './difference';
@@ -36,7 +38,7 @@ export function History(context) {

    function change(previous) {
        var difference = Difference(previous, history.graph());
-        dispatch.change(difference);
+        dispatch.call("change", this, difference);
        return difference;
    }

@@ -58,7 +60,7 @@ export function History(context) {
            stack[0].graph.rebase(entities, _.map(stack, 'graph'), false);
            tree.rebase(entities, false);

-            dispatch.change(undefined, extent);
+            dispatch.call("change", this, undefined, extent);
        },

        perform: function() {
@@ -114,7 +116,7 @@ export function History(context) {
                if (stack[index].annotation) break;
            }

-            dispatch.undone();
+            dispatch.call("undone");
            return change(previous);
        },

@@ -126,7 +128,7 @@ export function History(context) {
                if (stack[index].annotation) break;
            }

-            dispatch.redone();
+            dispatch.call("redone");
            return change(previous);
        },

@@ -202,7 +204,7 @@ export function History(context) {
            stack = [{graph: Graph()}];
            index = 0;
            tree = Tree(stack[0].graph);
-            dispatch.change();
+            dispatch.call("change");
            return history;
        },

@@ -317,7 +319,7 @@ export function History(context) {
                                if (err || _.isEmpty(missing)) {
                                    loading.close();
                                    context.redrawEnable(true);
-                                    dispatch.change();
+                                    dispatch.call("change");
                                }
                            };

@@ -364,7 +366,7 @@ export function History(context) {
            }

            if (loadComplete) {
-                dispatch.change();
+                dispatch.call("change");
            }

            return history;
@@ -409,5 +411,5 @@ export function History(context) {

    history.reset();

-    return d3.rebind(history, dispatch, 'on');
+    return rebind(history, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, joinWays, polygonContainsPolygon, polygonIntersectsPolygon } from '../geo/index';
 import { Entity } from './entity';
@@ -191,7 +192,7 @@ _.extend(Relation.prototype, {

    area: function(resolver) {
        return resolver.transient(this, 'area', function() {
-            return d3.geo.area(this.asGeoJSON(resolver));
+            return d3.geoArea(this.asGeoJSON(resolver));
        });
    },

@@ -235,7 +236,7 @@ _.extend(Relation.prototype, {
        var result = outers.map(function(o) {
            // Heuristic for detecting counterclockwise winding order. Assumes
            // that OpenStreetMap polygons are not hemisphere-spanning.
-            return [d3.geo.area({type: 'Polygon', coordinates: [o]}) > 2 * Math.PI ? o.reverse() : o];
+            return [d3.geoArea({type: 'Polygon', coordinates: [o]}) > 2 * Math.PI ? o.reverse() : o];
        });

        function findOuter(inner) {
@@ -257,7 +258,7 @@ _.extend(Relation.prototype, {
        for (var i = 0; i < inners.length; i++) {
            var inner = inners[i];

-            if (d3.geo.area({type: 'Polygon', coordinates: [inner]}) < 2 * Math.PI) {
+            if (d3.geoArea({type: 'Polygon', coordinates: [inner]}) < 2 * Math.PI) {
                inner = inner.reverse();
            }

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, cross } from '../geo/index';
 import { Entity } from './entity';
@@ -336,13 +337,13 @@ _.extend(Way.prototype, {
                json.coordinates[0].push(nodes[0].loc);
            }

-            var area = d3.geo.area(json);
+            var area = d3.geoArea(json);

            // Heuristic for detecting counterclockwise winding order. Assumes
            // that OpenStreetMap polygons are not hemisphere-spanning.
            if (area > 2 * Math.PI) {
                json.coordinates[0] = json.coordinates[0].reverse();
-                area = d3.geo.area(json);
+                area = d3.geoArea(json);
            }

            return isNaN(area) ? 0 : area;
@@ -1,3 +1,5 @@
+import * as d3 from 'd3';
+
 /*
    Bypasses features of D3's default projection stream pipeline that are unnecessary:
    * Antimeridian clipping
@@ -5,7 +7,7 @@
    * Resampling
 */
 export function RawMercator() {
-    var project = d3.geo.mercator.raw,
+    var project = d3.geoMercatorRaw,
        k = 512 / Math.PI, // scale
        x = 0, y = 0, // translate
        clipExtent = [[0, 0], [0, 0]];
@@ -39,7 +41,7 @@ export function RawMercator() {
        return projection;
    };

-    projection.stream = d3.geo.transform({
+    projection.stream = d3.geoTransform({
        point: function(x, y) {
            x = projection([x, y]);
            this.stream.point(x[0], x[1]);
@@ -1,3 +1,2 @@
-import '../js/lib/index';
 import * as iD from './index';
 window.iD = iD;
@@ -1,4 +1,6 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { getDimensions } from '../util/dimensions';
 import _ from 'lodash';
 import { AddMidpoint, Connect, MoveNode, Noop } from '../actions/index';
 import { Browse, Select } from './index';
@@ -104,7 +106,7 @@ export function DragNode(context) {

        var nudge = childOf(context.container().node(),
            d3.event.sourceEvent.toElement) &&
-            edge(d3.event.point, context.map().dimensions());
+            edge(d3.event.point, getDimensions(context.map()));

        if (nudge) startNudge(nudge);
        else stopNudge();
@@ -1,4 +1,7 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { getDimensions } from '../util/dimensions';
 import { Browse, Select } from './index';
 import { Move as MoveAction, Noop } from '../actions/index';
 import { Edit } from '../behavior/index';
@@ -9,7 +12,7 @@ export function Move(context, entityIDs, baseGraph) {
        button: 'browse'
    };

-    var keybinding = d3.keybinding('move'),
+    var keybinding = d3keybinding('move'),
        edit = Edit(context),
        annotation = entityIDs.length === 1 ?
            t('operations.move.annotation.' + context.geometry(entityIDs[0])) :
@@ -57,7 +60,7 @@ export function Move(context, entityIDs, baseGraph) {

        context.overwrite(action, annotation);

-        var nudge = edge(currMouse, context.map().dimensions());
+        var nudge = edge(currMouse, getDimensions(context.map()));
        if (nudge) startNudge(nudge);
        else stopNudge();
    }
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Browse, Select } from './index';
@@ -10,7 +12,7 @@ export function RotateWay(context, wayId) {
        button: 'browse'
    };

-    var keybinding = d3.keybinding('rotate-way'),
+    var keybinding = d3keybinding('rotate-way'),
        edit = Edit(context);

    mode.enter = function() {
@@ -20,7 +22,7 @@ export function RotateWay(context, wayId) {
            way = context.graph().entity(wayId),
            nodes = _.uniq(context.graph().childNodes(way)),
            points = nodes.map(function(n) { return context.projection(n.loc); }),
-            pivot = d3.geom.polygon(points).centroid(),
+            pivot = d3.polygonCentroid(points),
            angle;

        context.perform(
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Commit, Conflicts, Loading, Success } from '../ui/index';
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import * as Operations from '../operations/index';
@@ -16,7 +18,7 @@ export function Select(context, selectedIDs) {
        button: 'browse'
    };

-    var keybinding = d3.keybinding('select'),
+    var keybinding = d3keybinding('select'),
        timeout = null,
        behaviors = [
            Copy(context),
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, metersToOffset, offsetToMeters} from '../geo/index';
 import { qsString, stringQs } from '../util/index';
@@ -112,6 +114,7 @@ export function Background(context) {
    };

    background.dimensions = function(_) {
+        if (!_) return;
        baseLayer.dimensions(_);

        overlayLayers.forEach(function(layer) {
@@ -122,7 +125,7 @@ export function Background(context) {
    background.baseLayerSource = function(d) {
        if (!arguments.length) return baseLayer.source();
        baseLayer.source(d);
-        dispatch.change();
+        dispatch.call("change");
        background.updateImagery();
        return background;
    };
@@ -148,7 +151,7 @@ export function Background(context) {
            layer = overlayLayers[i];
            if (layer.source() === d) {
                overlayLayers.splice(i, 1);
-                dispatch.change();
+                dispatch.call("change");
                background.updateImagery();
                return;
            }
@@ -160,13 +163,13 @@ export function Background(context) {
            .dimensions(baseLayer.dimensions());

        overlayLayers.push(layer);
-        dispatch.change();
+        dispatch.call("change");
        background.updateImagery();
    };

    background.nudge = function(d, zoom) {
        baseLayer.source().nudge(d, zoom);
-        dispatch.change();
+        dispatch.call("change");
        background.updateImagery();
        return background;
    };
@@ -174,7 +177,7 @@ export function Background(context) {
    background.offset = function(d) {
        if (!arguments.length) return baseLayer.source().offset();
        baseLayer.source().offset(d);
-        dispatch.change();
+        dispatch.call("change");
        background.updateImagery();
        return background;
    };
@@ -246,5 +249,5 @@ export function Background(context) {
        }
    };

-    return d3.rebind(background, dispatch, 'on');
+    return rebind(background, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Extent, polygonIntersectsPolygon } from '../geo/index';
@@ -34,7 +35,7 @@ export function BackgroundSource(data) {

    source.area = function() {
        if (!data.polygon) return Number.MAX_VALUE;  // worldwide
-        var area = d3.geo.area({ type: 'MultiPolygon', coordinates: [ data.polygon ] });
+        var area = d3.geoArea({ type: 'MultiPolygon', coordinates: [ data.polygon ] });
        return isNaN(area) ? 0 : area;
    };

@@ -111,7 +112,7 @@ BackgroundSource.Bing = function(data, dispatch) {
                })
            };
        });
-        dispatch.change();
+        dispatch.call("change");
    });

    bing.copyrightNotices = function(zoom, extent) {
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Entity } from '../core/index';
 export function Features(context) {
@@ -54,8 +56,8 @@ export function Features(context) {

    function update() {
        _hidden = features.hidden();
-        dispatch.change();
-        dispatch.redraw();
+        dispatch.call("change");
+        dispatch.call("redraw");
    }

    function defineFeature(k, filter, max) {
@@ -226,7 +228,7 @@ export function Features(context) {

    features.resetStats = function() {
        _.each(_features, function(f) { f.count = 0; });
-        dispatch.change();
+        dispatch.call("change");
    };

    features.gatherStats = function(d, resolver, dimensions) {
@@ -255,7 +257,7 @@ export function Features(context) {
        if (currHidden !== _hidden) {
            _hidden = currHidden;
            needsRedraw = true;
-            dispatch.change();
+            dispatch.call("change");
        }

        return needsRedraw;
@@ -418,5 +420,5 @@ export function Features(context) {
        return result;
    };

-    return d3.rebind(features, dispatch, 'on');
+    return rebind(features, dispatch, 'on');
 }
@@ -1,17 +1,22 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { bindOnce } from '../util/bind_once';
+import { getDimensions, setDimensions } from '../util/dimensions';
 import _ from 'lodash';
 import { Areas, Labels, Layers, Lines, Midpoints, Points, Vertices } from '../svg/index';
 import { Extent, interp } from '../geo/index';
-import { fastMouse, setTransform } from '../util/index';
+import { fastMouse, setTransform, functor } from '../util/index';
 import { flash } from '../ui/index';

 export function Map(context) {
    var dimensions = [1, 1],
        dispatch = d3.dispatch('move', 'drawn'),
        projection = context.projection,
-        zoom = d3.behavior.zoom()
+        initialTransform = d3.zoomIdentity
            .translate(projection.translate())
-            .scale(projection.scale() * 2 * Math.PI)
+            .scale(projection.scale() * 2 * Math.PI),
+        zoom = d3.zoom()
            .scaleExtent([1024, 256 * Math.pow(2, 24)])
            .on('zoom', zoomPan),
        dblclickEnabled = true,
@@ -33,7 +38,12 @@ export function Map(context) {
        mouse,
        mousemove;

+    var _selection;
+
    function map(selection) {
+
+        _selection = selection;
+
        context
            .on('change.map', redraw);
        context.history()
@@ -50,7 +60,7 @@ export function Map(context) {

        selection
            .on('dblclick.map', dblClick)
-            .call(zoom);
+            .call(zoom, initialTransform);

        supersurface = selection.append('div')
            .attr('id', 'supersurface')
@@ -83,14 +93,14 @@ export function Map(context) {
                if (map.editable() && !transformed) {
                    var hover = d3.event.target.__data__;
                    surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
-                    dispatch.drawn({full: false});
+                    dispatch.call("drawn", this, {full: false});
                }
            })
            .on('mouseout.vertices', function() {
                if (map.editable() && !transformed) {
                    var hover = d3.event.relatedTarget && d3.event.relatedTarget.__data__;
                    surface.call(drawVertices.drawHover, context.graph(), hover, map.extent(), map.zoom());
-                    dispatch.drawn({full: false});
+                    dispatch.call("drawn", this, {full: false});
                }
            });

@@ -102,18 +112,18 @@ export function Map(context) {
        context.on('enter.map', function() {
            if (map.editable() && !transformed) {
                var all = context.intersects(map.extent()),
-                    filter = d3.functor(true),
+                    filter = functor(true),
                    graph = context.graph();

                all = context.features().filter(all, graph);
                surface
                    .call(drawVertices, graph, all, filter, map.extent(), map.zoom())
                    .call(drawMidpoints, graph, all, filter, map.trimmedExtent());
-                dispatch.drawn({full: false});
+                dispatch.call("drawn", this, {full: false});
            }
        });

-        map.dimensions(selection.dimensions());
+        map.dimensions(getDimensions(selection));

        drawLabels.supersurface(supersurface);
    }
@@ -148,7 +158,7 @@ export function Map(context) {

            } else {
                data = all;
-                filter = d3.functor(true);
+                filter = functor(true);
            }
        }

@@ -162,13 +172,13 @@ export function Map(context) {
            .call(drawLabels, graph, data, filter, dimensions, !difference && !extent)
            .call(drawPoints, graph, data, filter);

-        dispatch.drawn({full: true});
+        dispatch.call("drawn", this, {full: true});
    }

    function editOff() {
        context.features().resetStats();
        surface.selectAll('.layer-osm *').remove();
-        dispatch.drawn({full: true});
+        dispatch.call("drawn", this, {full: true});
    }

    function dblClick() {
@@ -178,31 +188,34 @@ export function Map(context) {
        }
    }

-    function zoomPan() {
-        if (Math.log(d3.event.scale) / Math.LN2 - 8 < minzoom) {
+    function zoomPan(manualEvent) {
+
+        var eventTransform = (manualEvent || d3.event).transform;
+
+        if (Math.log(event) / Math.LN2 - 8 < minzoom) {
            surface.interrupt();
            flash(context.container())
                .select('.content')
                .text(t('cannot_zoom'));
            setZoom(context.minEditableZoom(), true);
            queueRedraw();
-            dispatch.move(map);
+            dispatch.call("move", this, map);
            return;
        }

        projection
-            .translate(d3.event.translate)
-            .scale(d3.event.scale / (2 * Math.PI));
+            .translate([eventTransform.x, eventTransform.y])
+            .scale(eventTransform.k / (2 * Math.PI));

-        var scale = d3.event.scale / transformStart[0],
-            tX = (d3.event.translate[0] / scale - transformStart[1][0]) * scale,
-            tY = (d3.event.translate[1] / scale - transformStart[1][1]) * scale;
+        var scale = eventTransform.k / transformStart.k,
+            tX = (eventTransform.x / scale - transformStart.x) * scale,
+            tY = (eventTransform.y / scale - transformStart.y) * scale;

        transformed = true;
        setTransform(supersurface, tX, tY, scale);
        queueRedraw();

-        dispatch.move(map);
+        dispatch.call("move", this, map);
    }

    function resetTransform() {
@@ -247,9 +260,11 @@ export function Map(context) {
        wrapper
            .call(drawLayers);

-        transformStart = [
-            projection.scale() * 2 * Math.PI,
-            projection.translate().slice()];
+        transformStart = {
+            k: projection.k * 2 * Math.PI,
+            x: projection.x,
+            y: projection
+        };

        return map;
    }
@@ -317,13 +332,15 @@ export function Map(context) {
            l = pointLocation(center);
        scale = Math.max(1024, Math.min(256 * Math.pow(2, 24), scale));
        projection.scale(scale / (2 * Math.PI));
-        zoom.scale(scale);
+        if (_selection) {
+            _selection.call(zoom.transform, d3.zoomTransform(_selection).scale(scale));
+        }
        var t = projection.translate();
        l = locationPoint(l);
        t[0] += center[0] - l[0];
        t[1] += center[1] - l[1];
        projection.translate(t);
-        zoom.translate(projection.translate());
+        // TODO zoom.translate(projection.translate());
        return true;
    }

@@ -337,7 +354,9 @@ export function Map(context) {
        projection.translate([
            t[0] - ll[0] + pxC[0],
            t[1] - ll[1] + pxC[1]]);
-        zoom.translate(projection.translate());
+        if (_selection) {
+            _selection.call(zoom.transform, d3.zoomTransform(_selection).translate(projection.translate()));
+        }
        return true;
    }

@@ -346,8 +365,10 @@ export function Map(context) {
        t[0] += d[0];
        t[1] += d[1];
        projection.translate(t);
-        zoom.translate(projection.translate());
-        dispatch.move(map);
+        if (_selection) {
+            _selection.call(zoom.transform, d3.zoomTransform(_selection).translate(projection.translate()));
+        }
+        dispatch.call("move", this, map);
        return redraw();
    };

@@ -383,7 +404,7 @@ export function Map(context) {
        }

        if (setCenter(loc)) {
-            dispatch.move(map);
+            dispatch.call("move", this, map);
        }

        return redraw();
@@ -403,7 +424,7 @@ export function Map(context) {
        }

        if (setZoom(z)) {
-            dispatch.move(map);
+            dispatch.call("move", this, map);
        }

        return redraw();
@@ -423,7 +444,7 @@ export function Map(context) {
            zoomed   = setZoom(z);

        if (centered || zoomed) {
-            dispatch.move(map);
+            dispatch.call("move", this, map);
        }

        return redraw();
@@ -432,7 +453,7 @@ export function Map(context) {
    map.centerEase = function(loc2, duration) {
        duration = duration || 250;

-        surface.one('mousedown.ease', function() {
+        bindOnce(surface, 'mousedown.ease', function() {
            map.cancelEase();
        });

@@ -443,7 +464,7 @@ export function Map(context) {
        var t1 = Date.now(),
            t2 = t1 + duration,
            loc1 = map.center(),
-            ease = d3.ease('cubic-in-out');
+            ease = d3.easeCubicInOut;

        easing = true;

@@ -459,12 +480,11 @@ export function Map(context) {
            var locNow = interp(loc1, loc2, ease((tNow - t1) / duration));
            setCenter(locNow);

-            d3.event = {
-                scale: zoom.scale(),
-                translate: zoom.translate()
-            };
+            // TODO: fix

-            zoomPan();
+            zoomPan({
+                transform: d3.zoomTransform(_selection)
+            });
            return !easing;
        });

@@ -534,5 +554,5 @@ export function Map(context) {

    map.layers = drawLayers;

-    return d3.rebind(map, dispatch, 'on');
+    return rebind(map, dispatch, 'on');
 }
@@ -1,13 +1,15 @@
-import { prefixCSSProperty } from '../util/index';
+import * as d3 from 'd3';
+import { d3geoTile } from '../../js/lib/d3.geo.tile';
+import { prefixCSSProperty, functor } from '../util/index';
 export function TileLayer(context) {
    var tileSize = 256,
-        tile = d3.geo.tile(),
+        tile = d3geoTile(),
        projection,
        cache = {},
        tileOrigin,
        z,
        transformProp = prefixCSSProperty('Transform'),
-        source = d3.functor('');
+        source = functor('');


    // blacklist overlay tiles around Null Island..
@@ -1,5 +1,8 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 /* global Mapillary:false */
 import _ from 'lodash';
+import { d3geoTile } from '../../js/lib/d3.geo.tile';
 import { Detect } from '../util/detect';
 import { Extent } from '../geo/index';
 import { Icon } from '../svg/index';
@@ -134,7 +137,7 @@ function getTiles(projection, dimensions) {
            s / 2 - projection.translate()[0],
            s / 2 - projection.translate()[1]];

-    return d3.geo.tile()
+    return d3geoTile()
        .scaleExtent([tileZoom, tileZoom])
        .scale(s)
        .size(dimensions)
@@ -207,8 +210,8 @@ function loadTilePage(which, url, tile, page) {

            cache.rtree.load(features);

-            if (which === 'images') dispatch.loadedImages();
-            if (which === 'signs') dispatch.loadedSigns();
+            if (which === 'images') dispatch.call("loadedImages");
+            if (which === 'signs') dispatch.call("loadedSigns");

            if (data.features.length === maxResults && nextPage < maxPages) {
                loadTilePage(which, url, tile, nextPage);
@@ -403,7 +406,7 @@ export function init() {
        mapillary.reset();
    }

-    mapillary.event = d3.rebind(mapillary, dispatch, 'on');
+    mapillary.event = rebind(mapillary, dispatch, 'on');

    return mapillary;
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { Extent } from '../geo/index';
 import { qsString } from '../util/index';
 import rbush from 'rbush';
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { qsString } from '../util/index';

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Path, TagClasses } from './index';
 import { Entity } from '../core/index';
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { polygonIntersectsPolygon } from '../geo/index';
 import {
    imperial as imperialData,
@@ -22,7 +23,7 @@ export function Debug(projection, context) {
            showsImagery = context.getDebug('imagery'),
            showsImperial = context.getDebug('imperial'),
            showsDriveLeft = context.getDebug('driveLeft'),
-            path = d3.geo.path().projection(projection);
+            path = d3.geoPath().projection(projection);


        var debugData = [];
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 /*
    A standalone SVG element that contains only a `defs` sub-element. To be
    used once globally, since defs IDs must be unique within a document.
@@ -6,12 +7,15 @@ export function Defs(context) {

    function SVGSpriteDefinition(id, href) {
        return function(defs) {
-            d3.xml(href, 'image/svg+xml', function(err, svg) {
-                if (err) return;
-                defs.node().appendChild(
-                    d3.select(svg.documentElement).attr('id', id).node()
-                );
-            });
+            d3.request(href)
+		.mimeType('image/svg+xml')
+		.response(function(xhr) { return xhr.responseXML; })
+            	.get(function(err, svg) {
+		    if (err) return;
+		    defs.node().appendChild(
+			d3.select(svg.documentElement).attr('id', id).node()
+		    );
+		});
        };
    }

@@ -20,16 +24,15 @@ export function Defs(context) {

        // marker
        defs.append('marker')
-            .attr({
-                id: 'oneway-marker',
-                viewBox: '0 0 10 10',
-                refY: 2.5,
-                refX: 5,
-                markerWidth: 2,
-                markerHeight: 2,
-                markerUnits: 'strokeWidth',
-                orient: 'auto'
-            })
+            .attr('id', 'oneway-marker')
+            .attr('viewBox', '0 0 10 10')
+            .attr('refY', 2.5)
+            .attr('refX', 5)
+            .attr('markerWidth', 2)
+            .attr('markerHeight', 2)
+            .attr('markerUnits', 'strokeWidth')
+            .attr('orient', 'auto')
+
            .append('path')
            .attr('class', 'oneway')
            .attr('d', 'M 5 3 L 0 3 L 0 2 L 5 2 L 5 0 L 10 2.5 L 5 5 z')
@@ -52,33 +55,27 @@ export function Defs(context) {
            ])
            .enter()
            .append('pattern')
-            .attr({
-                id: function (d) {
-                    return 'pattern-' + d[0];
-                },
-                width: 32,
-                height: 32,
-                patternUnits: 'userSpaceOnUse'
-            });
+            .attr('id', function (d) {
+                return 'pattern-' + d[0];
+            })
+            .attr('width', 32)
+            .attr('height', 32)
+            .attr('patternUnits', 'userSpaceOnUse')

        patterns.append('rect')
-            .attr({
-                x: 0,
-                y: 0,
-                width: 32,
-                height: 32,
-                'class': function (d) {
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', 32)
+            .attr('height', 32)
+            .attr('class', function (d) {
                    return 'pattern-color-' + d[0];
-                }
            });

        patterns.append('image')
-            .attr({
-                x: 0,
-                y: 0,
-                width: 32,
-                height: 32
-            })
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', 32)
+            .attr('height', 32)
            .attr('xlink:href', function (d) {
                return context.imagePath('pattern/' + d[1] + '.png');
            });
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, polygonIntersectsPolygon } from '../geo/index';
 import { Detect } from '../util/detect';
@@ -61,7 +62,7 @@ export function Gpx(projection, context, dispatch) {
        paths.exit()
            .remove();

-        var path = d3.geo.path()
+        var path = d3.geoPath()
            .projection(projection);

        paths
@@ -106,7 +107,7 @@ export function Gpx(projection, context, dispatch) {
    drawGpx.enabled = function(_) {
        if (!arguments.length) return Gpx.enabled;
        Gpx.enabled = _;
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

@@ -119,7 +120,7 @@ export function Gpx(projection, context, dispatch) {
        if (!arguments.length) return Gpx.geojson;
        if (_.isEmpty(gj) || _.isEmpty(gj.features)) return this;
        Gpx.geojson = gj;
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

@@ -157,7 +158,7 @@ export function Gpx(projection, context, dispatch) {
            }, []);

        if (!polygonIntersectsPolygon(viewport, coords, true)) {
-            var extent = Extent(d3.geo.bounds(geojson));
+            var extent = Extent(d3.geoBounds(geojson));
            map.centerZoom(extent.center(), map.trimmedExtentZoom(extent));
        }

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { displayName, getStyle } from '../util/index';
 import { Entity } from '../core/index';
@@ -5,7 +6,7 @@ import { pathLength } from '../geo/index';
 import rbush from 'rbush';

 export function Labels(projection, context) {
-    var path = d3.geo.path().projection(projection);
+    var path = d3.geoPath().projection(projection);

    // Replace with dict and iterate over entities tags instead?
    var label_stack = [
@@ -111,10 +112,8 @@ export function Labels(projection, context) {
        texts.selectAll('.textpath')
            .filter(filter)
            .data(entities, Entity.key)
-            .attr({
-                'startOffset': '50%',
-                'xlink:href': function(d) { return '#labelpath-' + d.id; }
-            })
+            .attr('startOffset', '50%')
+            .attr('xlink:href', function(d) { return '#labelpath-' + d.id; })
            .text(displayName);

        texts.exit().remove();
@@ -462,7 +461,7 @@ export function Labels(projection, context) {
                .remove();

            debugboxes
-                .attr('d', d3.geo.path().projection(null));
+                .attr('d', d3.geoPath().projection(null));
        }
    }

@@ -1,3 +1,6 @@
+import { rebind } from '../util/rebind';
+import { getDimensions, setDimensions } from '../util/dimensions';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Debug } from './debug';
 import { Gpx } from './gpx';
@@ -60,7 +63,7 @@ export function Layers(projection, context) {
        arr.forEach(function(id) {
            layers = _.reject(layers, function(o) {return o.id === id;});
        });
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

@@ -71,13 +74,13 @@ export function Layers(projection, context) {
                layers.push(obj);
            }
        });
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

    drawLayers.dimensions = function(_) {
-        if (!arguments.length) return svg.dimensions();
-        svg.dimensions(_);
+        if (!arguments.length) return getDimensions(svg);
+        setDimensions(svg, _);
        layers.forEach(function(obj) {
            if (obj.layer.dimensions) {
                obj.layer.dimensions(_);
@@ -87,5 +90,5 @@ export function Layers(projection, context) {
    };


-    return d3.rebind(drawLayers, dispatch, 'on');
+    return rebind(drawLayers, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { OneWaySegments, Path, RelationMemberTags, TagClasses } from './index';
 import { Detect } from '../util/detect';
@@ -1,9 +1,11 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { PointTransform } from './point_transform';
+import { getDimensions, setDimensions } from '../util/dimensions';
 import { mapillary as mapillaryService } from '../services/index';

 export function MapillaryImages(projection, context, dispatch) {
-    var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
+    var debouncedRedraw = _.debounce(function () { dispatch.call("change"); }, 1000),
        minZoom = 12,
        layer = d3.select(null),
        _mapillary;
@@ -85,7 +87,7 @@ export function MapillaryImages(projection, context, dispatch) {

    function update() {
        var mapillary = getMapillary(),
-            data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []),
+            data = (mapillary ? mapillary.images(projection, getDimensions(layer)) : []),
            imageKey = mapillary ? mapillary.getSelectedImage() : null;

        var markers = layer.selectAll('.viewfield-group')
@@ -136,7 +138,7 @@ export function MapillaryImages(projection, context, dispatch) {
            if (mapillary && ~~context.map().zoom() >= minZoom) {
                editOn();
                update();
-                mapillary.loadImages(projection, layer.dimensions());
+                mapillary.loadImages(projection, getDimensions(layer));
            } else {
                editOff();
            }
@@ -151,7 +153,7 @@ export function MapillaryImages(projection, context, dispatch) {
        } else {
            hideLayer();
        }
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

@@ -160,8 +162,8 @@ export function MapillaryImages(projection, context, dispatch) {
    };

    drawImages.dimensions = function(_) {
-        if (!arguments.length) return layer.dimensions();
-        layer.dimensions(_);
+        if (!arguments.length) return getDimensions(layer);
+        setDimensions(layer, _);
        return this;
    };

@@ -1,9 +1,11 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
+import { getDimensions, setDimensions } from '../util/dimensions';
 import { PointTransform } from './point_transform';
 import { mapillary as mapillaryService } from '../services/index';

 export function MapillarySigns(projection, context, dispatch) {
-    var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
+    var debouncedRedraw = _.debounce(function () { dispatch.call("change"); }, 1000),
        minZoom = 12,
        layer = d3.select(null),
        _mapillary;
@@ -57,7 +59,7 @@ export function MapillarySigns(projection, context, dispatch) {

    function update() {
        var mapillary = getMapillary(),
-            data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []),
+            data = (mapillary ? mapillary.signs(projection, getDimensions(layer)) : []),
            imageKey = mapillary ? mapillary.getSelectedImage() : null;

        var signs = layer.selectAll('.icon-sign')
@@ -105,7 +107,7 @@ export function MapillarySigns(projection, context, dispatch) {
            if (mapillary && ~~context.map().zoom() >= minZoom) {
                editOn();
                update();
-                mapillary.loadSigns(context, projection, layer.dimensions());
+                mapillary.loadSigns(context, projection, getDimensions(layer));
            } else {
                editOff();
            }
@@ -120,7 +122,7 @@ export function MapillarySigns(projection, context, dispatch) {
        } else {
            hideLayer();
        }
-        dispatch.change();
+        dispatch.call("change");
        return this;
    };

@@ -130,8 +132,8 @@ export function MapillarySigns(projection, context, dispatch) {
    };

    drawSigns.dimensions = function(_) {
-        if (!arguments.length) return layer.dimensions();
-        layer.dimensions(_);
+        if (!arguments.length) return getDimensions(layer);
+        setDimensions(layer, _);
        return this;
    };

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { euclideanDistance } from '../geo/index';

 export function OneWaySegments(projection, graph, dt) {
@@ -7,14 +8,14 @@ export function OneWaySegments(projection, graph, dt) {
            i = 0,
            offset = dt,
            segments = [],
-            clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
+            clip = d3.geoClipExtent().extent(projection.clipExtent()).stream,
            coordinates = graph.childNodes(entity).map(function(n) {
                return n.loc;
            });

        if (entity.tags.oneway === '-1') coordinates.reverse();

-        d3.geo.stream({
+        d3.geoStream({
            type: 'LineString',
            coordinates: coordinates
        }, projection.stream(clip({
@@ -1,8 +1,9 @@
+import * as d3 from 'd3';
 export function Path(projection, graph, polygon) {
    var cache = {},
-        clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
+        clip = d3.geoClipExtent().extent(projection.clipExtent()).stream,
        project = projection.stream,
-        path = d3.geo.path()
+        path = d3.geoPath()
            .projection({stream: function(output) { return polygon ? project(output) : project(clip(output)); }});

    return function(entity) {
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { pavedTags } from '../core/tags';

 export function TagClasses() {
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { Entity } from '../core/index';
 import { PointTransform } from './index';

@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { Icon } from '../svg/index';
 export function Account(context) {
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import _ from 'lodash';
 export function Attribution(context) {
    var selection;
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import _ from 'lodash';
@@ -487,7 +489,7 @@ export function Background(context) {
        update();
        setOpacity(opacityDefault);

-        var keybinding = d3.keybinding('background')
+        var keybinding = d3keybinding('background')
            .on(key, toggle)
            .on(cmd('⌘B'), quickSwitch)
            .on('F', hide)
@@ -1,4 +1,8 @@
+import { rebind } from '../util/rebind';
+import { d3combobox } from '../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { triggerEvent } from '../util/trigger_event';
 import { tooltip } from '../util/tooltip';
 import _ from 'lodash';
 import { displayName, entityOrMemberSelector } from '../util/index';
@@ -88,7 +92,7 @@ export function Commit(context) {
                }
            }

-            commentField.call(d3.combobox().caseSensitive(true).data(comments));
+            commentField.call(d3combobox().caseSensitive(true).data(comments));
        });

        var clippyArea = commentSection.append('div')
@@ -180,7 +184,7 @@ export function Commit(context) {

        var cancelButton = buttonSection.append('button')
            .attr('class', 'secondary-action col5 button cancel-button')
-            .on('click.cancel', function() { dispatch.cancel(); });
+            .on('click.cancel', function() { dispatch.call("cancel"); });

        cancelButton.append('span')
            .attr('class', 'label')
@@ -193,7 +197,7 @@ export function Commit(context) {
                return (n && n.value.length) ? null : true;
            })
            .on('click.save', function() {
-                dispatch.save({
+                dispatch.call('save', this, {
                    comment: commentField.node().value
                });
            });
@@ -278,8 +282,8 @@ export function Commit(context) {

        // Call checkComment off the bat, in case a changeset
        // comment is recovered from localStorage
-        commentField.trigger('input');
+        triggerEvent(commentField, 'input');
    }

-    return d3.rebind(commit, dispatch, 'on');
+    return rebind(commit, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { Extent } from '../geo/index';
 import { Icon } from '../svg/index';
@@ -15,7 +17,7 @@ export function Conflicts(context) {
        header
            .append('button')
            .attr('class', 'fr')
-            .on('click', function() { dispatch.cancel(); })
+            .on('click', function() { dispatch.call("cancel"); })
            .call(Icon('#icon-close'));

        header
@@ -33,7 +35,7 @@ export function Conflicts(context) {
            .append('a')
            .attr('class', 'conflicts-download')
            .text(t('save.conflict.download_changes'))
-            .on('click.download', function() { dispatch.download(); });
+            .on('click.download', function() { dispatch.call("download"); });

        body
            .append('div')
@@ -56,13 +58,13 @@ export function Conflicts(context) {
            .attr('disabled', list.length > 1)
            .attr('class', 'action conflicts-button col6')
            .text(t('save.title'))
-            .on('click.try_again', function() { dispatch.save(); });
+            .on('click.try_again', function() { dispatch.call("save"); });

        buttons
            .append('button')
            .attr('class', 'secondary-action conflicts-button col6')
            .text(t('confirm.cancel'))
-            .on('click.cancel', function() { dispatch.cancel(); });
+            .on('click.cancel', function() { dispatch.call("cancel"); });
    }


@@ -251,5 +253,5 @@ export function Conflicts(context) {
        return conflicts;
    };

-    return d3.rebind(conflicts, dispatch, 'on');
+    return rebind(conflicts, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Icon } from '../svg/index';
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { Toggle } from './toggle';

 export function Disclosure() {
@@ -30,7 +32,7 @@ export function Disclosure() {
            expanded = !expanded;
            $link.classed('expanded', expanded);
            $body.call(Toggle(expanded));
-            dispatch.toggled(expanded);
+            dispatch.call("toggled", this, expanded);
        }
    };

@@ -52,5 +54,5 @@ export function Disclosure() {
        return disclosure;
    };

-    return d3.rebind(disclosure, dispatch, 'on');
+    return rebind(disclosure, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import _ from 'lodash';
@@ -96,7 +98,7 @@ export function EntityEditor(context) {

        selection.selectAll('.preset-reset')
            .on('click', function() {
-                dispatch.choose(activePreset);
+                dispatch.call("choose", this, activePreset);
            });

        // Update
@@ -245,5 +247,5 @@ export function EntityEditor(context) {
        return entityEditor;
    };

-    return d3.rebind(entityEditor, dispatch, 'on');
+    return rebind(entityEditor, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import _ from 'lodash';
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import * as sexagesimal from 'sexagesimal';
 import { Extent, chooseEdge } from '../geo/index';
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import _ from 'lodash';

 export function access(field) {
@@ -33,7 +37,7 @@ export function access(field) {
            .attr('id', function(d) { return 'preset-input-access-' + d; })
            .each(function(d) {
                d3.select(this)
-                    .call(d3.combobox()
+                    .call(d3combobox()
                        .data(access.options(d)));
            });

@@ -46,8 +50,8 @@ export function access(field) {

    function change(d) {
        var tag = {};
-        tag[d] = d3.select(this).value() || undefined;
-        dispatch.change(tag);
+        tag[d] = getSetValue(d3.select(this)) || undefined;
+        dispatch.call("change", this, tag);
    }

    access.options = function(type) {
@@ -174,8 +178,8 @@ export function access(field) {
    };

    access.tags = function(tags) {
-        items.selectAll('.preset-input-access')
-            .value(function(d) { return tags[d] || ''; })
+        getSetValue(items.selectAll('.preset-input-access'),
+            function(d) { return tags[d] || ''; })
            .attr('placeholder', function() {
                return tags.access ? tags.access : field.placeholder();
            });
@@ -194,5 +198,5 @@ export function access(field) {
            .node().focus();
    };

-    return d3.rebind(access, dispatch, 'on');
+    return rebind(access, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { Extent, chooseEdge, sphericalDistance } from '../../geo/index';
 import { nominatim } from '../../services/index';
@@ -150,19 +154,19 @@ export function address(field, context) {
            // Update

            wrap.selectAll('.addr-street')
-                .call(d3.combobox()
+                .call(d3combobox()
                    .fetcher(function(value, callback) {
                        callback(getStreets());
                    }));

            wrap.selectAll('.addr-city')
-                .call(d3.combobox()
+                .call(d3combobox()
                    .fetcher(function(value, callback) {
                        callback(getCities());
                    }));

            wrap.selectAll('.addr-postcode')
-                .call(d3.combobox()
+                .call(d3combobox()
                    .fetcher(function(value, callback) {
                        callback(getPostCodes());
                    }));
@@ -174,7 +178,7 @@ export function address(field, context) {
            wrap.selectAll('input:not(.combobox-input)')
                .on('input', change(true));

-            dispatch.init();
+            dispatch.call("init");
            isInitialized = true;
        });
    }
@@ -188,15 +192,14 @@ export function address(field, context) {
                    tags['addr:' + field.id] = this.value || undefined;
                });

-            dispatch.change(tags, onInput);
+            dispatch.call("change", this, tags, onInput);
        };
    }

    function updateTags(tags) {
-        wrap.selectAll('input')
-            .value(function (field) {
-                return tags['addr:' + field.id] || '';
-            });
+        getSetValue(wrap.selectAll('input'), function (field) {
+            return tags['addr:' + field.id] || '';
+        });
    }

    address.entity = function(_) {
@@ -209,7 +212,7 @@ export function address(field, context) {
        if (isInitialized) {
            updateTags(tags);
        } else {
-            dispatch.on('init', function () {
+            dispatch.call("on", this, 'init', function () {
                updateTags(tags);
            });
        }
@@ -220,5 +223,5 @@ export function address(field, context) {
        if (node) node.focus();
    };

-    return d3.rebind(address, dispatch, 'on');
+    return rebind(address, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { oneWayTags } from '../../core/index';

@@ -56,7 +58,7 @@ export function check(field) {
            .on('click', function() {
                var t = {};
                t[field.key] = values[(values.indexOf(value) + 1) % values.length];
-                dispatch.change(t);
+                dispatch.call("change", this, t);
                d3.event.stopPropagation();
            });

@@ -81,5 +83,5 @@ export function check(field) {
        box.node().focus();
    };

-    return d3.rebind(check, dispatch, 'on');
+    return rebind(check, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import _ from 'lodash';

 import { t } from '../../util/locale';
@@ -15,7 +19,7 @@ export function combo(field, context) {
        optstrings = field.strings && field.strings.options,
        optarray = field.options,
        snake_case = (field.snake_case || (field.snake_case === undefined)),
-        combobox = d3.combobox().minItems(isMulti ? 1 : 2),
+        combobox = d3combobox().minItems(isMulti ? 1 : 2),
        comboData = [],
        multiData = [],
        container,
@@ -189,13 +193,13 @@ export function combo(field, context) {


    function change() {
-        var val = tagValue(input.value()),
+        var val = tagValue(getSetValue(input)),
            t = {};

        if (isMulti) {
            if (!val) return;
            container.classed('active', false);
-            input.value('');
+            getSetValue(input, '');
            field.keys.push(field.key + val);
            t[field.key + val] = 'yes';
            window.setTimeout(function() { input.node().focus(); }, 10);
@@ -204,7 +208,7 @@ export function combo(field, context) {
            t[field.key] = val;
        }

-        dispatch.change(t);
+        dispatch.call("change", this, t);
    }


@@ -212,7 +216,7 @@ export function combo(field, context) {
        d3.event.stopPropagation();
        var t = {};
        t[d.key] = undefined;
-        dispatch.change(t);
+        dispatch.call("change", this, t);
    }


@@ -315,7 +319,7 @@ export function combo(field, context) {
                .remove();

        } else {
-            input.value(displayValue(tags[field.key]));
+            getSetValue(input, displayValue(tags[field.key]));
        }
    };

@@ -332,5 +336,5 @@ export function combo(field, context) {
    };


-    return d3.rebind(combo, dispatch, 'on');
+    return rebind(combo, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 export function cycleway(field) {
    var dispatch = d3.dispatch('change'),
        items;
@@ -31,7 +35,7 @@ export function cycleway(field) {
            .attr('id', function(d) { return 'preset-input-cycleway-' + d; })
            .each(function(d) {
                d3.select(this)
-                    .call(d3.combobox()
+                    .call(d3combobox()
                        .data(cycleway.options(d)));
            });

@@ -44,8 +48,8 @@ export function cycleway(field) {

    function change() {
        var inputs = d3.selectAll('.preset-input-cycleway')[0],
-            left = d3.select(inputs[0]).value(),
-            right = d3.select(inputs[1]).value(),
+            left = getSetValue(d3.select(inputs[0])),
+            right = getSetValue(d3.select(inputs[1])),
            tag = {};
        if (left === 'none' || left === '') { left = undefined; }
        if (right === 'none' || right === '') { right = undefined; }
@@ -67,7 +71,7 @@ export function cycleway(field) {
            };
        }

-        dispatch.change(tag);
+        dispatch.call("change", this, tag);
    }

    cycleway.options = function() {
@@ -80,8 +84,7 @@ export function cycleway(field) {
    };

    cycleway.tags = function(tags) {
-        items.selectAll('.preset-input-cycleway')
-            .value(function(d) {
+        getSetValue(items.selectAll('.preset-input-cycleway'), function(d) {
                // If cycleway is set, always return that
                if (tags.cycleway) {
                    return tags.cycleway;
@@ -96,5 +99,5 @@ export function cycleway(field) {
            .node().focus();
    };

-    return d3.rebind(cycleway, dispatch, 'on');
+    return rebind(cycleway, dispatch, 'on');
 }
@@ -1,3 +1,6 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { nominatim as nominatimService } from '../../services/index';
 import { phoneFormats } from '../../../data/index';
@@ -71,8 +74,8 @@ export function url(field, context) {
    function change(onInput) {
        return function() {
            var t = {};
-            t[field.key] = input.value() || undefined;
-            dispatch.change(t, onInput);
+            t[field.key] = getSetValue(input) || undefined;
+            dispatch.call("change", this, t, onInput);
        };
    }

@@ -83,7 +86,7 @@ export function url(field, context) {
    };

    i.tags = function(tags) {
-        input.value(tags[field.key] || '');
+        getSetValue(input, tags[field.key] || '');
    };

    i.focus = function() {
@@ -91,5 +94,5 @@ export function url(field, context) {
        if (node) node.focus();
    };

-    return d3.rebind(i, dispatch, 'on');
+    return rebind(i, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 export function lanes(field, context) {
    var dispatch = d3.dispatch('change'),
        LANE_WIDTH = 40,
@@ -23,7 +25,7 @@ export function lanes(field, context) {
        var surface =  wrap.selectAll('.surface')
            .data([0]);

-        var d = wrap.dimensions();
+        var d = getDimensions(wrap);
        var freeSpace = d[0] - lanesData.lanes.length * LANE_WIDTH * 1.5 + LANE_WIDTH * 0.5;

        surface.enter()
@@ -116,5 +118,5 @@ export function lanes(field, context) {
    lanes.focus = function() {};
    lanes.off = function() {};

-    return d3.rebind(lanes, dispatch, 'on');
+    return rebind(lanes, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import { getSetValue } from '../../util/get_set_value';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { tooltip } from '../../util/tooltip';
 import _ from 'lodash';
@@ -25,7 +29,7 @@ export function localized(field, context) {

        if (field.id === 'name') {
            var preset = context.presets().match(entity, context.graph());
-            input.call(d3.combobox().fetcher(
+            input.call(d3combobox().fetcher(
                SuggestNames(preset, suggestions)
            ));
        }
@@ -73,15 +77,15 @@ export function localized(field, context) {
    function change(onInput) {
        return function() {
            var t = {};
-            t[field.key] = d3.select(this).value() || undefined;
-            dispatch.change(t, onInput);
+            t[field.key] = getSetValue(d3.select(this)) || undefined;
+            dispatch.call("change", this, t, onInput);
        };
    }

    function key(lang) { return field.key + ':' + lang; }

    function changeLang(d) {
-        var lang = d3.select(this).value(),
+        var lang = getSetValue(d3.select(this)),
            t = {},
            language = _.find(wikipediaData, function(d) {
                return d[0].toLowerCase() === lang.toLowerCase() ||
@@ -94,9 +98,8 @@ export function localized(field, context) {
            t[key(d.lang)] = undefined;
        }

-        var value = d3.select(this.parentNode)
-            .selectAll('.localized-value')
-            .value();
+        var value = getSetValue(d3.select(this.parentNode)
+            .selectAll('.localized-value'));

        if (lang && value) {
            t[key(lang)] = value;
@@ -105,14 +108,14 @@ export function localized(field, context) {
        }

        d.lang = lang;
-        dispatch.change(t);
+        dispatch.call("change", this, t);
    }

    function changeValue(d) {
        if (!d.lang) return;
        var t = {};
-        t[key(d.lang)] = d3.select(this).value() || undefined;
-        dispatch.change(t);
+        t[key(d.lang)] = getSetValue(d3.select(this)) || undefined;
+        dispatch.call("change", this, t);
    }

    function fetcher(value, cb) {
@@ -137,7 +140,7 @@ export function localized(field, context) {
        innerWrap.attr('class', 'entry')
            .each(function() {
                var wrap = d3.select(this);
-                var langcombo = d3.combobox().fetcher(fetcher).minItems(0);
+                var langcombo = d3combobox().fetcher(fetcher).minItems(0);

                var label = wrap.append('label')
                    .attr('class','form-label')
@@ -150,7 +153,7 @@ export function localized(field, context) {
                        d3.event.preventDefault();
                        var t = {};
                        t[key(d.lang)] = undefined;
-                        dispatch.change(t);
+                        dispatch.call("change", this, t);
                        d3.select(this.parentNode.parentNode)
                            .style('top','0')
                            .style('max-height','240px')
@@ -202,14 +205,13 @@ export function localized(field, context) {

        var entry = selection.selectAll('.entry');

-        entry.select('.localized-lang')
-            .value(function(d) {
+        getSetValue(entry.select('.localized-lang'), function(d) {
                var lang = _.find(wikipediaData, function(lang) { return lang[2] === d.lang; });
                return lang ? lang[1] : d.lang;
            });

-        entry.select('.localized-value')
-            .value(function(d) { return d.value; });
+        getSetValue(entry.select('.localized-value'),
+            function(d) { return d.value; });
    }

    localized.tags = function(tags) {
@@ -224,7 +226,7 @@ export function localized(field, context) {
            }
        }

-        input.value(tags[field.key] || '');
+        getSetValue(input, tags[field.key] || '');

        var postfixed = [], k, m;
        for (k in tags) {
@@ -247,5 +249,5 @@ export function localized(field, context) {
        return localized;
    };

-    return d3.rebind(localized, dispatch, 'on');
+    return rebind(localized, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { getSetValue } from '../../util/get_set_value';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { pointInPolygon } from '../../geo/index';
 import { imperial as imperialData } from '../../../data/index';
@@ -14,8 +18,8 @@ export function maxspeed(field, context) {
        imperialValues = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80];

    function maxspeed(selection) {
-        combobox = d3.combobox();
-        var unitCombobox = d3.combobox().data(['km/h', 'mph'].map(comboValues));
+        combobox = d3combobox();
+        var unitCombobox = d3combobox().data(['km/h', 'mph'].map(comboValues));

        input = selection.selectAll('#preset-input-' + field.id)
            .data([0]);
@@ -52,8 +56,8 @@ export function maxspeed(field, context) {
            .call(unitCombobox);

        function changeUnits() {
-            imperial = unitInput.value() === 'mph';
-            unitInput.value(imperial ? 'mph' : 'km/h');
+            imperial = getSetValue(unitInput) === 'mph';
+            getSetValue(unitInput, imperial ? 'mph' : 'km/h');
            setSuggestions();
            change();
        }
@@ -62,7 +66,7 @@ export function maxspeed(field, context) {

    function setSuggestions() {
        combobox.data((imperial ? imperialValues : metricValues).map(comboValues));
-        unitInput.value(imperial ? 'mph' : 'km/h');
+        getSetValue(unitInput, imperial ? 'mph' : 'km/h');
    }

    function comboValues(d) {
@@ -74,7 +78,7 @@ export function maxspeed(field, context) {

    function change() {
        var tag = {},
-            value = input.value();
+            value = getSetValue(input);

        if (!value) {
            tag[field.key] = undefined;
@@ -84,7 +88,7 @@ export function maxspeed(field, context) {
            tag[field.key] = value + ' mph';
        }

-        dispatch.change(tag);
+        dispatch.call("change", this, tag);
    }

    maxspeed.tags = function(tags) {
@@ -99,7 +103,7 @@ export function maxspeed(field, context) {

        setSuggestions();

-        input.value(value || '');
+        getSetValue(input, value || '');
    };

    maxspeed.focus = function() {
@@ -110,5 +114,5 @@ export function maxspeed(field, context) {
        entity = _;
    };

-    return d3.rebind(maxspeed, dispatch, 'on');
+    return rebind(maxspeed, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';

 export function radio(field) {
@@ -47,7 +49,7 @@ export function radio(field) {
                t[d] = active ? 'yes' : undefined;
            }
        });
-        dispatch.change(t);
+        dispatch.call("change", this, t);
    }

    radio.tags = function(tags) {
@@ -73,5 +75,5 @@ export function radio(field) {
        radios.node().focus();
    };

-    return d3.rebind(radio, dispatch, 'on');
+    return rebind(radio, dispatch, 'on');
 }
@@ -1,3 +1,7 @@
+import { rebind } from '../../util/rebind';
+import { functor } from '../../util/index';
+import { getDimensions, setDimensions } from '../../util/dimensions';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { Extent, Intersection, RawMercator, Turn, inferRestriction } from '../../geo/index';
 import { Layers, Lines, Turns, Vertices } from '../../svg/index';
@@ -33,11 +37,11 @@ export function restrictions(field, context) {
        var intersection = Intersection(context.graph(), vertexID),
            graph = intersection.graph,
            vertex = graph.entity(vertexID),
-            filter = d3.functor(true),
+            filter = functor(true),
            extent = Extent(),
            projection = RawMercator();

-        var d = wrap.dimensions(),
+        var d = getDimensions(wrap),
            c = [d[0] / 2, d[1] / 2],
            z = 24;

@@ -50,7 +54,7 @@ export function restrictions(field, context) {
            .translate([c[0] - s[0], c[1] - s[1]])
            .clipExtent([[0, 0], d]);

-        var drawLayers = Layers(projection, context).only('osm').dimensions(d),
+        var drawLayers = setDimensions(Layers(projection, context).only('osm'), d),
            drawVertices = Vertices(projection, context),
            drawLines = Lines(projection, context),
            drawTurns = Turns(projection, context);
@@ -63,8 +67,7 @@ export function restrictions(field, context) {

        var surface = wrap.selectAll('.surface');

-        surface
-            .dimensions(d)
+        setDimensions(surface, d)
            .call(drawVertices, graph, [vertex], filter, extent, z)
            .call(drawLines, graph, intersection.ways, filter)
            .call(drawTurns, graph, intersection.turns(fromNodeID));
@@ -91,7 +94,7 @@ export function restrictions(field, context) {

        d3.select(window)
            .on('resize.restrictions', function() {
-                wrap.dimensions(null);
+                setDimensions(wrap, null);
                render();
            });

@@ -176,5 +179,5 @@ export function restrictions(field, context) {
            .on('resize.restrictions', null);
    };

-    return d3.rebind(restrictions, dispatch, 'on');
+    return rebind(restrictions, dispatch, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';

 export function textarea(field) {
@@ -22,18 +24,18 @@ export function textarea(field) {
    function change(onInput) {
        return function() {
            var t = {};
-            t[field.key] = input.value() || undefined;
-            dispatch.change(t, onInput);
+            t[field.key] = getSetValue(input) || undefined;
+            dispatch.call("change", this, t, onInput);
        };
    }

    textarea.tags = function(tags) {
-        input.value(tags[field.key] || '');
+        getSetValue(input, tags[field.key] || '');
    };

    textarea.focus = function() {
        input.node().focus();
    };

-    return d3.rebind(textarea, dispatch, 'on');
+    return rebind(textarea, dispatch, 'on');
 }
@@ -1,3 +1,6 @@
+import { rebind } from '../../util/rebind';
+import { d3combobox } from '../../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import _ from 'lodash';
 import { ChangeTags } from '../../actions/index';
@@ -16,7 +19,7 @@ export function wikipedia(field, context) {
        link, entity, lang, title;

    function wiki(selection) {
-        var langcombo = d3.combobox()
+        var langcombo = d3combobox()
            .fetcher(function(value, cb) {
                var v = value.toLowerCase();

@@ -29,7 +32,7 @@ export function wikipedia(field, context) {
                }));
            });

-        var titlecombo = d3.combobox()
+        var titlecombo = d3combobox()
            .fetcher(function(value, cb) {

                if (!value) value = context.entity(entity.id).tags.name || '';
@@ -45,11 +48,11 @@ export function wikipedia(field, context) {
        lang = selection.selectAll('input.wiki-lang')
            .data([0]);

-        lang.enter().append('input')
+        getSetValue(lang.enter().append('input')
            .attr('type', 'text')
            .attr('class', 'wiki-lang')
-            .attr('placeholder', t('translate.localized_translation_language'))
-            .value(language()[1]);
+            .attr('placeholder', t('translate.localized_translation_language')),
+            language()[1]);

        lang
            .call(langcombo)
@@ -80,7 +83,7 @@ export function wikipedia(field, context) {
    }

    function language() {
-        var value = lang.value().toLowerCase();
+        var value = getSetValue(lang).toLowerCase();
        var locale = Detect().locale.toLowerCase();
        var localeLanguage;
        return _.find(wikipediaData, function(d) {
@@ -92,7 +95,7 @@ export function wikipedia(field, context) {
    }

    function changeLang() {
-        lang.value(language()[1]);
+        getSetValue(lang, language()[1]);
        change(true);
    }

@@ -101,7 +104,7 @@ export function wikipedia(field, context) {
    }

    function change(skipWikidata) {
-        var value = title.value(),
+        var value = getSetValue(title),
            m = value.match(/https?:\/\/([-a-z]+)\.wikipedia\.org\/(?:wiki|\1-[-a-z]+)\/([^#]+)(?:#(.+))?/),
            l = m && _.find(wikipediaData, function(d) { return m[1] === d[2]; }),
            anchor,
@@ -120,8 +123,8 @@ export function wikipedia(field, context) {
                value += '#' + anchor.replace(/_/g, ' ');
            }
            value = value.slice(0, 1).toUpperCase() + value.slice(1);
-            lang.value(l[1]);
-            title.value(value);
+            getSetValue(lang, l[1]);
+            getSetValue(title, value);
        }

        syncTags.wikipedia = value ? language()[2] + ':' + value : undefined;
@@ -129,7 +132,7 @@ export function wikipedia(field, context) {
            syncTags.wikidata = undefined;
        }

-        dispatch.change(syncTags);
+        dispatch.call("change", this, syncTags);


        if (skipWikidata || !value || !language()[2]) return;
@@ -160,7 +163,7 @@ export function wikipedia(field, context) {
            });

            context.overwrite(ChangeTags(currEntityId, currTags), annotation);
-            dispatch.change(currTags);
+            dispatch.call("change", this, currTags);
        });
    }

@@ -172,8 +175,8 @@ export function wikipedia(field, context) {

        // value in correct format
        if (l) {
-            lang.value(l[1]);
-            title.value(m[2] + (anchor ? ('#' + anchor) : ''));
+            getSetValue(lang, l[1]);
+            getSetValue(title, m[2] + (anchor ? ('#' + anchor) : ''));
            if (anchor) {
                try {
                    // Best-effort `anchorencode:` implementation
@@ -187,9 +190,9 @@ export function wikipedia(field, context) {

        // unrecognized value format
        } else {
-            title.value(value);
+            getSetValue(title, value);
            if (value && value !== '') {
-                lang.value('');
+                getSetValue(lang, '');
            }
            link.attr('href', 'https://en.wikipedia.org/wiki/Special:Search?search=' + value);
        }
@@ -205,5 +208,5 @@ export function wikipedia(field, context) {
        title.node().focus();
    };

-    return d3.rebind(wiki, dispatch, 'on');
+    return rebind(wiki, dispatch, 'on');
 }
@@ -1,8 +1,10 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { cmd } from './cmd';

 export function FullScreen(context) {
    var element = context.container().node(),
-        keybinding = d3.keybinding('full-screen');
+        keybinding = d3keybinding('full-screen');
        // button;

    function getFullScreenFn() {
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { Icon } from '../svg/index';
@@ -147,7 +149,7 @@ export function Help(context) {

        clickHelp(docs[0], 0);

-        var keybinding = d3.keybinding('help')
+        var keybinding = d3keybinding('help')
            .on(key, toggle)
            .on('B', hide)
            .on('F', hide);
@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Detect } from '../util/detect';
@@ -141,9 +143,9 @@ export function Info(context) {
            if (geometry === 'line' || geometry === 'area') {
                var closed = (entity.type === 'relation') || (entity.isClosed() && !entity.isDegenerate()),
                    feature = entity.asGeoJSON(resolver),
-                    length = radiansToMeters(d3.geo.length(toLineString(feature))),
+                    length = radiansToMeters(d3.geoLength(toLineString(feature))),
                    lengthLabel = t('infobox.' + (closed ? 'perimeter' : 'length')),
-                    centroid = d3.geo.centroid(feature);
+                    centroid = d3.geoCentroid(feature);

                list.append('li')
                    .text(t('infobox.geometry') + ': ' +
@@ -226,7 +228,7 @@ export function Info(context) {

        redraw();

-        var keybinding = d3.keybinding('info')
+        var keybinding = d3keybinding('info')
            .on(key, toggle);

        d3.select(document)
@@ -1,4 +1,7 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
+import { getDimensions, setDimensions } from '../util/dimensions';
 import { tooltip } from '../util/tooltip';
 import { Defs, Icon } from '../svg/index';
 import { Account } from './account';
@@ -195,7 +198,7 @@ export function init(context) {
        var mapDimensions = map.dimensions();

        d3.select(window).on('resize.editor', function() {
-            mapDimensions = content.dimensions(null);
+            mapDimensions = setDimensions(content, null);
            map.dimensions(mapDimensions);
        });

@@ -209,7 +212,7 @@ export function init(context) {
        // pan amount
        var pa = 10;

-        var keybinding = d3.keybinding('main')
+        var keybinding = d3keybinding('main')
            .on('⌫', function() { d3.event.preventDefault(); })
            .on('←', pan([pa, 0]))
            .on('↑', pan([0, pa]))
@@ -246,7 +249,8 @@ export function init(context) {
            });
    }

-    function ui(container) {
+    function ui(node) {
+        var container = d3.select(node);
        context.container(container);
        context.loadLocale(function() {
            render(container);
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { EntityEditor } from './entity_editor';
 import { PresetList } from './preset_list';
 import { ViewOnOSM } from './view_on_osm';
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { icon, pad } from './helper';

@@ -87,5 +89,5 @@ export function area(context, reveal) {
        d3.select('.preset-search-input').on('keyup.intro', null);
    };

-    return d3.rebind(step, event, 'on');
+    return rebind(step, event, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { Entity, Graph } from '../../core/index';
 import { Browse } from '../../modes/index';
@@ -6,6 +7,7 @@ import { line } from './line';
 import { navigation } from './navigation';
 import { point } from './point';
 import { startEditing } from './start_editing';
+import { d3curtain } from '../../util/curtain';
 import { default as introGraphRaw } from '../../../data/intro_graph.json';

 var sampleIntros = {
@@ -104,7 +106,7 @@ export function intro(context) {

        d3.selectAll('#map .layer-background').style('opacity', 1);

-        var curtain = d3.curtain();
+        var curtain = d3curtain();
        selection.call(curtain);

        function reveal(box, text, options) {
@@ -1,3 +1,6 @@
+import { rebind } from '../../util/rebind';
+import { bindOnce } from '../../util/bind_once';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import _ from 'lodash';
 import { icon, pad } from './helper';
@@ -113,7 +116,7 @@ export function line(context, reveal) {
                d3.select('#curtain').style('pointer-events', 'none');
                var road = d3.select('.preset-category-road .preset-list-button');
                reveal(road.node(), t('intro.lines.road'));
-                road.one('click.intro', roadCategory);
+                bindOnce(road, 'click.intro', roadCategory);
            }, 500);
        }

@@ -121,10 +124,10 @@ export function line(context, reveal) {
            timeout(function() {
                var grid = d3.select('.subgrid');
                reveal(grid.node(), t('intro.lines.residential'));
-                grid.selectAll(':not(.preset-highway-residential) .preset-list-button')
-                    .one('click.intro', retryPreset);
-                grid.selectAll('.preset-highway-residential .preset-list-button')
-                    .one('click.intro', roadDetails);
+                bindOnce(grid.selectAll(':not(.preset-highway-residential) .preset-list-button'),
+                    'click.intro', retryPreset);
+                bindOnce(grid.selectAll('.preset-highway-residential .preset-list-button'),
+                    'click.intro', roadDetails);
            }, 500);
        }

@@ -133,7 +136,7 @@ export function line(context, reveal) {
            timeout(function() {
                var preset = d3.select('.entity-editor-pane .preset-list-button');
                reveal(preset.node(), t('intro.lines.wrong_preset'));
-                preset.one('click.intro', presetCategory);
+                bindOnce(preset, 'click.intro', presetCategory);
            }, 500);
        }

@@ -155,5 +158,5 @@ export function line(context, reveal) {
        context.history().on('change.intro', null);
    };

-    return d3.rebind(step, event, 'on');
+    return rebind(step, event, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import _ from 'lodash';
 import { icon, pointBox } from './helper';
@@ -112,5 +114,5 @@ export function navigation(context, reveal) {
            .on('keyup.intro', null);
    };

-    return d3.rebind(step, event, 'on');
+    return rebind(step, event, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { icon, pad } from './helper';

@@ -135,7 +137,7 @@ export function point(context, reveal) {
        }

        function deleted(changed) {
-            if (changed.deleted().length) event.done();
+            if (changed.deleted().length) event.call("done");
        }

    };
@@ -151,5 +153,5 @@ export function point(context, reveal) {
            .on('keydown.intro', null);
    };

-    return d3.rebind(step, event, 'on');
+    return rebind(step, event, 'on');
 }
@@ -1,3 +1,5 @@
+import { rebind } from '../../util/rebind';
+import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { icon } from './helper';
 import { modal } from '../modal';
@@ -48,7 +50,7 @@ export function startEditing(context, reveal) {
                startbutton.append('h2')
                    .text(t('intro.startediting.start'));

-            event.startEditing();
+            event.call("startEditing");
        }, 10500);
    };

@@ -57,5 +59,5 @@ export function startEditing(context, reveal) {
        timeouts.forEach(window.clearTimeout);
    };

-    return d3.rebind(step, event, 'on');
+    return rebind(step, event, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { Extent } from '../geo/index';
 import { Toggle } from './toggle';

@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { Icon } from '../svg/index';
@@ -423,7 +425,7 @@ export function MapData(context) {

        setFill(fillDefault);

-        var keybinding = d3.keybinding('features')
+        var keybinding = d3keybinding('features')
            .on(key, togglePanel)
            .on('W', toggleWireframe)
            .on('B', hidePanel)
@@ -1,7 +1,10 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { Debug, Gpx } from '../svg/index';
 import { RawMercator } from '../geo/index';
 import { TileLayer } from '../renderer/index';
 import { setTransform } from '../util/index';
+import { getDimensions, setDimensions } from '../util/dimensions';

 export function MapInMap(context) {
    var key = '/';
@@ -12,7 +15,7 @@ export function MapInMap(context) {
            projection = RawMercator(),
            gpxLayer = Gpx(projection, context).showLabels(false),
            debugLayer = Debug(projection, context),
-            zoom = d3.behavior.zoom()
+            zoom = d3.zoom()
                .scaleExtent([ztok(0.5), ztok(24)])
                .on('zoom', zoomPan),
            transformed = false,
@@ -75,7 +78,7 @@ export function MapInMap(context) {
            panning = false;

            if (tCurr[0] !== tStart[0] && tCurr[1] !== tStart[1]) {
-                var dMini = wrap.dimensions(),
+                var dMini = getDimensions(wrap),
                    cMini = [ dMini[0] / 2, dMini[1] / 2 ];

                context.map().center(projection.invert(cMini));
@@ -85,7 +88,7 @@ export function MapInMap(context) {

        function updateProjection() {
            var loc = context.map().center(),
-                dMini = wrap.dimensions(),
+                dMini = getDimensions(wrap),
                cMini = [ dMini[0] / 2, dMini[1] / 2 ],
                tMain = context.projection.translate(),
                kMain = context.projection.scale(),
@@ -129,7 +132,7 @@ export function MapInMap(context) {

            updateProjection();

-            var dMini = wrap.dimensions(),
+            var dMini = getDimensions(wrap),
                zMini = ktoz(projection.scale() * 2 * Math.PI);

            // setup tile container
@@ -212,7 +215,7 @@ export function MapInMap(context) {

            // redraw viewport bounding box
            if (!panning) {
-                var getPath = d3.geo.path().projection(projection),
+                var getPath = d3.geoPath().projection(projection),
                    bbox = { type: 'Polygon', coordinates: [context.map().extent().polygon()] };

                viewport = wrap.selectAll('.map-in-map-viewport')
@@ -294,7 +297,7 @@ export function MapInMap(context) {

        redraw();

-        var keybinding = d3.keybinding('map-in-map')
+        var keybinding = d3keybinding('map-in-map')
            .on(key, toggle);

        d3.select(document)
@@ -1,6 +1,8 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { Icon } from '../svg/index';
 export function modal(selection, blocking) {
-    var keybinding = d3.keybinding('modal');
+    var keybinding = d3keybinding('modal');
    var previous = selection.select('div.modal');
    var animate = previous.empty();

@@ -1,3 +1,5 @@
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import _ from 'lodash';
 import { tooltip } from '../util/tooltip';
 import { AddArea, AddLine, AddPoint, Browse } from '../modes/index';
@@ -61,7 +63,7 @@ export function Modes(context) {
                .classed('mode-' + exited.id, false);
        });

-        var keybinding = d3.keybinding('mode-buttons');
+        var keybinding = d3keybinding('mode-buttons');

        modes.forEach(function(m) {
            keybinding.on(m.key, function() { if (editable()) context.enter(m); });
@@ -1,3 +1,7 @@
+import { rebind } from '../util/rebind';
+import { getSetValue } from '../util/get_set_value';
+import { d3combobox } from '../../js/lib/d3.combobox.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import _ from 'lodash';
 import { Browse } from '../modes/index';
@@ -206,7 +210,7 @@ export function preset(context) {
            .attr('class', 'value')
            .attr('type', 'text');

-        $input.value('')
+        getSetValue($input, '')
            .attr('placeholder', function() {
                var placeholder = [];
                for (var field in notShown) {
@@ -214,7 +218,7 @@ export function preset(context) {
                }
                return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : '');
            })
-            .call(d3.combobox().data(notShown)
+            .call(d3combobox().data(notShown)
                .minItems(1)
                .on('accept', show));

@@ -234,13 +238,13 @@ export function preset(context) {
        function revert(field) {
            d3.event.stopPropagation();
            d3.event.preventDefault();
-            event.change(field.revert());
+            event.call("change", field.revert());
        }

        function remove(field) {
            d3.event.stopPropagation();
            d3.event.preventDefault();
-            event.change(field.remove());
+            event.call("change", field.remove());
        }
    }

@@ -273,5 +277,5 @@ export function preset(context) {
        return presets;
    };

-    return d3.rebind(presets, event, 'on');
+    return rebind(presets, event, 'on');
 }
@@ -1,3 +1,5 @@
+import { functor } from '../util/index';
+import * as d3 from 'd3';
 import { Icon } from '../svg/index';
 import { featureIcons } from '../../data/index';

@@ -71,13 +73,13 @@ export function PresetIcon() {

    presetIcon.preset = function(_) {
        if (!arguments.length) return preset;
-        preset = d3.functor(_);
+        preset = functor(_);
        return presetIcon;
    };

    presetIcon.geometry = function(_) {
        if (!arguments.length) return geometry;
-        geometry = d3.functor(_);
+        geometry = functor(_);
        return presetIcon;
    };

@@ -1,3 +1,6 @@
+import { rebind } from '../util/rebind';
+import { d3keybinding } from '../../js/lib/d3.keybinding.js';
+import * as d3 from 'd3';
 import { t } from '../util/locale';
 import { Browse } from '../modes/index';
 import { ChangePreset } from '../actions/index';
@@ -34,7 +37,7 @@ export function PresetList(context) {
        if (context.entity(id).isUsed(context.graph())) {
            messagewrap.append('button')
                .attr('class', 'preset-choose')
-                .on('click', function() { dispatch.choose(currentPreset); })
+                .on('click', function() { dispatch.call("choose", this, currentPreset); })
                .append('span')
                .html('&#9658;');
        } else {
@@ -49,14 +52,14 @@ export function PresetList(context) {
        function keydown() {
            // hack to let delete shortcut work when search is autofocused
            if (search.property('value').length === 0 &&
-                (d3.event.keyCode === d3.keybinding.keyCodes['⌫'] ||
-                 d3.event.keyCode === d3.keybinding.keyCodes['⌦'])) {
+                (d3.event.keyCode === d3keybinding.keyCodes['⌫'] ||
+                 d3.event.keyCode === d3keybinding.keyCodes['⌦'])) {
                d3.event.preventDefault();
                d3.event.stopPropagation();
                Delete([id], context)();
            } else if (search.property('value').length === 0 &&
                (d3.event.ctrlKey || d3.event.metaKey) &&
-                d3.event.keyCode === d3.keybinding.keyCodes.z) {
+                d3.event.keyCode === d3keybinding.keyCodes.z) {
                d3.event.preventDefault();
                d3.event.stopPropagation();
                context.undo();
@@ -229,7 +232,7 @@ export function PresetList(context) {
                ChangePreset(id, currentPreset, preset),
                t('operations.change_tags.annotation'));

-            dispatch.choose(preset);
+            dispatch.call("choose", this, preset);
        };

        item.help = function() {
@@ -262,5 +265,5 @@ export function PresetList(context) {
        return presetList;
    };

-    return d3.rebind(presetList, dispatch, 'on');
+    return rebind(presetList, dispatch, 'on');
 }
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import { roundCoords } from '../geo/index';
 import { tooltipHtml } from './tooltipHtml';

--- a/Show More
+++ b/Show More