A d3 version 4 implementation of a zoomable view with clickable content. Click the orange circle to turn it into red, drag with the mouse to pan, use the mouse wheel to zoom, or pinch with your fingers to zoom and pan.
Compare with a d3 version 3 implementation.
| svg = d3.select 'svg' | |
| width = svg.node().getBoundingClientRect().width | |
| height = svg.node().getBoundingClientRect().height | |
| zoomable_layer = svg.append 'g' | |
| zoom = d3.zoom() | |
| .scaleExtent([-Infinity,Infinity]) | |
| .on 'zoom', () -> | |
| zoomable_layer | |
| .attrs | |
| transform: d3.event.transform | |
| svg.call zoom | |
| zoomable_layer.append 'circle' | |
| .attrs | |
| r: 100 | |
| cx: width/2 | |
| cy: height/2 | |
| fill: 'teal' | |
| zoomable_layer.append 'text' | |
| .text '4' | |
| .attrs | |
| x: width/2 | |
| y: height/2 | |
| zoomable_layer.append 'circle' | |
| .attrs | |
| r: 60 | |
| cx: 2*width/5 | |
| cy: height/3 | |
| fill: 'orange' | |
| .on 'click', () -> | |
| d3.select(this) | |
| .attrs | |
| fill: 'red' | |
| body, html { | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| } | |
| text { | |
| text-anchor: middle; | |
| font-family: sans-serif; | |
| font-size: 72px; | |
| text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3v4 zoom</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> | |
| </head> | |
| <body> | |
| <svg></svg> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| // Generated by CoffeeScript 1.10.0 | |
| (function() { | |
| var height, svg, width, zoom, zoomable_layer; | |
| svg = d3.select('svg'); | |
| width = svg.node().getBoundingClientRect().width; | |
| height = svg.node().getBoundingClientRect().height; | |
| zoomable_layer = svg.append('g'); | |
| zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() { | |
| return zoomable_layer.attrs({ | |
| transform: d3.event.transform | |
| }); | |
| }); | |
| svg.call(zoom); | |
| zoomable_layer.append('circle').attrs({ | |
| r: 100, | |
| cx: width / 2, | |
| cy: height / 2, | |
| fill: 'teal' | |
| }); | |
| zoomable_layer.append('text').text('4').attrs({ | |
| x: width / 2, | |
| y: height / 2 | |
| }); | |
| zoomable_layer.append('circle').attrs({ | |
| r: 60, | |
| cx: 2 * width / 5, | |
| cy: height / 3, | |
| fill: 'orange' | |
| }).on('click', function() { | |
| return d3.select(this).attrs({ | |
| fill: 'red' | |
| }); | |
| }); | |
| }).call(this); |
