/index.html
Created Apr 19, 2017
D3 event filtering
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <div id="zoom-filtering-div" style="width: 400px; margin: auto"> | |
| </div> | |
| <link href="style.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| zoomFiltering('#zoom-filtering-div'); | |
| </script> | |
| </body> |
| function zoomFiltering(divId) { | |
| var width = 400, height=250, maxR=30; | |
| var svg = d3.select(divId) | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height) | |
| var g = svg.append('g') | |
| // create 15 circles | |
| var numCircles = 55; | |
| var circles = []; | |
| for (var i = 0; i < numCircles; i++) | |
| circles.push({'x': 1+Math.floor(Math.random() * width), | |
| 'y': 1+Math.floor(Math.random() * height), | |
| 'r': 1+Math.floor(Math.random() * maxR)}); | |
| g.selectAll('circle') | |
| .data(circles) | |
| .enter() | |
| .append('circle') | |
| .attr('cx', function(d) { return d.x; }) | |
| .attr('cy', function(d) { return d.y; }) | |
| .attr('r', function(d) { return d.r; }) | |
| .classed('no-zoom', true) | |
| var zoom = d3.zoom() | |
| .filter(() => { return !d3.event.path[0].classList.contains('no-zoom') }) | |
| .on('zoom', function(d) { g.attr('transform', d3.event.transform); }); | |
| var texts = ["The red circles don't allow scroll-wheel zooming and", | |
| "drag-based panning"] | |
| svg.selectAll('text') | |
| .data(texts) | |
| .enter() | |
| .append('text') | |
| .attr('x', 200) | |
| .attr('y', function(d,i) { return 20 + i * 20; }) | |
| .text(function(d) { return d; }); | |
| svg.call(zoom); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment