index.html

## index.html
<!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>


## script.js
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);
}

## style.css
circle {
    fill: red;
    opacity: 0.2;
    stroke: black;
    stroke-width: 1px;
}

svg {
    border: 1px solid;
    font: 13px sans-serif;
    text-anchor: middle;
}