Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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);
}
circle {
fill: red;
opacity: 0.2;
stroke: black;
stroke-width: 1px;
}
svg {
border: 1px solid;
font: 13px sans-serif;
text-anchor: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment