D3js v4 - Drag + Zoom + Slider

Original version written in D3 v3: /bollwyvl/871b7c781b92fd0044f5

This version is simply upgraded to D3 v4 for educational purpose.

2017.04.23 - Hanoi, Vietnam

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .dot circle {
            fill: lightsteelblue;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

.dot circle.dragging {
            fill: red;
            stroke: brown;
        }

.axis line {
            fill: none;
            stroke: #ddd;
            shape-rendering: crispEdges;
        }
    </style>
    <title></title>
</head>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        var margin = { top: -5, right: -5, bottom: -5, left: -5 },
            width = 460 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

var zoom = d3.zoom()
            .scaleExtent([1, 10])
            .on("zoom", zoomed);

console.log(zoom.scaleExtent()[0], zoom.scaleExtent()[1]);

var drag = d3.drag()
            .subject(function (d) { return d; })
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended);

var slider = d3.select("body").append("p").append("input")
            .datum({})
            .attr("type", "range")
            .attr("value", zoom.scaleExtent()[0])
            .attr("min", zoom.scaleExtent()[0])
            .attr("max", zoom.scaleExtent()[1])
            .attr("step", (zoom.scaleExtent()[1] - zoom.scaleExtent()[0]) / 100)
            .on("input", slided);

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")    
            .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
            .call(zoom);

var rect = svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all");

var container = svg.append("g");

container.append("g")
            .attr("class", "x axis")
            .selectAll("line")
            .data(d3.range(0, width, 10))
            .enter().append("line")
            .attr("x1", function (d) { return d; })
            .attr("y1", 0)
            .attr("x2", function (d) { return d; })
            .attr("y2", height);

container.append("g")
            .attr("class", "y axis")
            .selectAll("line")
            .data(d3.range(0, height, 10))
            .enter().append("line")
            .attr("x1", 0)
            .attr("y1", function (d) { return d; })
            .attr("x2", width)
            .attr("y2", function (d) { return d; });

d3.tsv("dots.tsv", dottype, function (error, dots) {
            dot = container.append("g")
                .attr("class", "dot")
                .selectAll("circle")
                .data(dots)
                .enter().append("circle")
                .attr("r", 5)
                .attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; })
                .call(drag);
        });

function dottype(d) {
            d.x = +d.x;
            d.y = +d.y;
            return d;
        }

function zoomed() {
            const currentTransform = d3.event.transform;
            container.attr("transform", currentTransform);
            slider.property("value", currentTransform.k);
        }

function dragstarted(d) {
            d3.event.sourceEvent.stopPropagation();
            d3.select(this).classed("dragging", true);
        }

function dragged(d) {
            d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
        }

function dragended(d) {
            d3.select(this).classed("dragging", false);
        }

function slided(d) {
            zoom.scaleTo(svg, d3.select(this).property("value"));
        }

</script>

</body>

</html>

https://d3js.org/d3.v4.min.js