D3 zoom v3 vs v5

Question

I'm having trouble translating a D3 example with a zoom behavior from v3 to v5. My code is based on this example: https://bl.ocks.org/mbostock/2206340 by Mike Bostock. I use react and I get these errors "d3.zoom(...).translate is not a function" and "d3.zoom(...).scale is not a function". I looked in the documentation, but could not find scale or translate just scaleBy and translateTo and translateBy. I can't figure out how to do it either way.

componentDidMount() {
    this.drawChart();
}

drawChart = () => {
    var width = window.innerWidth * 0.66,
        height = window.innerHeight * 0.7,
        centered,
        world_id;

    window.addEventListener("resize", function() {
        width = window.innerWidth * 0.66;
        height = window.innerHeight * 0.7;
    });

    var tooltip = d3
        .select("#container")
        .append("div")
        .attr("class", "tooltip hidden");

    var projection = d3
        .geoMercator()
        .scale(100)
        .translate([width / 2, height / 1.5]);

    var path = d3.geoPath().projection(projection);

    var zoom = d3
        .zoom()
        .translate(projection.translate())
        .scale(projection.scale())
        .scaleExtent([height * 0.197, 3 * height])
        .on("zoom", zoomed);

    var svg = d3
        .select("#container")
        .append("svg")
        .attr("width", width)
        .attr("class", "map card shadow")
        .attr("height", height);

    var g = svg.append("g").call(zoom);

    g.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height);

    var world_id = data2;
    var world = data;
    console.log(world);

    var rawCountries = topojson.feature(world, world.objects.countries)
            .features,
        neighbors = topojson.neighbors(world.objects.countries.geometries);

    console.log(rawCountries);
    console.log(neighbors);
    var countries = [];

    // Splice(remove) random pieces
    rawCountries.splice(145, 1);
    rawCountries.splice(38, 1);

    rawCountries.map(country => {
        //console.log(parseInt(country.id) !== 010)
        // Filter out Antartica and Kosovo
        if (parseInt(country.id) !== parseInt("010")) {
            countries.push(country);
        } else {
            console.log(country.id);
        }
    });

    console.log(countries);

    g.append("g")
        .attr("id", "countries")
        .selectAll(".country")
        .data(countries)
        .enter()
        .insert("path", ".graticule")
        .attr("class", "country")
        .attr("d", path)
        .attr("data-name", function(d) {
            return d.id;
        })
        .on("click", clicked)
        .on("mousemove", function(d, i) {
            var mouse = d3.mouse(svg.node()).map(function(d) {
                return parseInt(d);
            });

            tooltip
                .classed("hidden", false)
                .attr(
                    "style",
                    "left:" + mouse[0] + "px;top:" + (mouse[1] - 50) + "px"
                )
                .html(getCountryName(d.id));
        })
        .on("mouseout", function(d, i) {
            tooltip.classed("hidden", true);
        });

    function getCountryName(id) {
        var country = world_id.filter(
            country => parseInt(country.iso_n3) == parseInt(id)
        );
        console.log(country[0].name);
        console.log(id);
        return country[0].name;
    }

    function updateCountry(d) {
        console.log(world_id);

        var country = world_id.filter(
            country => parseInt(country.iso_n3) == parseInt(d.id)
        );
        console.log(country[0].name);
        var iso_a2;
        if (country[0].name === "Kosovo") {
            iso_a2 = "xk";
        } else {
            iso_a2 = country[0].iso_a2.toLowerCase();
        }

        // Remove any current data
        $("#countryName").empty();
        $("#countryFlag").empty();

        $("#countryName").text(country[0].name);

        var src = "svg/" + iso_a2 + ".svg";
        var img = "<img id='flag' class='flag' src=" + src + " />";
        $("#countryFlag").append(img);
    }

    // Remove country when deselected
    function removeCountry() {
        $("#countryName").empty();
        $("#countryFlag").empty();
    }

    // When clicked on a country
    function clicked(d) {
        if (d && centered !== d) {
            centered = d;

            updateCountry(d);
        } else {
            centered = null;
            removeCountry();
        }

        g.selectAll("path").classed(
            "active",
            centered &&
                function(d) {
                    return d === centered;
                }
        );

        console.log("Clicked");
        console.log(d);
        console.log(d);

        var centroid = path.centroid(d),
            translate = projection.translate();

        console.log(translate);
        console.log(centroid);

        projection.translate([
            translate[0] - centroid[0] + width / 2,
            translate[1] - centroid[1] + height / 2
        ]);

        zoom.translate(projection.translate());

        g.selectAll("path")
            .transition()
            .duration(700)
            .attr("d", path);
    }

    // D3 zoomed
    function zoomed() {
        console.log("zoomed");
        projection.translate(d3.event.translate).scale(d3.event.scale);
        g.selectAll("path").attr("d", path);
    }
};

render() {
    return (
        <div className="container-fluid bg">
            <div class="row">
                <div className="col-12">
                    <h2 className="header text-center p-3 mb-5">
                        Project 2 - World value survey
                    </h2>
                </div>
            </div>
            <div className="row mx-auto">
                <div className="col-md-8">
                    <div id="container" class="mx-auto" />
                </div>
                <div className="col-md-4">
                    <div id="countryInfo" className="card">
                        <h2 id="countryName" className="p-3 text-center" />
                        <div id="countryFlag" className="mx-auto" />
                    </div>
                </div>
            </div>
        </div>
    );
}

Answer 1

I won't go into the differences between v3 and v5 partly because it has been long enough that I have forgotten much of the specifics and details as to how v3 was different. Instead I'll just look at how to implement that example with v5. This answer would require adaptation for non-geographic cases - the geographic projection is doing the visual zooming in this case.

In your example, the zoom keeps track of the zoom state in order to set the projection properly. The zoom does not set a transform to any SVG element, instead the projection reprojects the features each zoom (or click).

So, to get started, with d3v5, after we call the zoom on our selection, we can set the zoom on a selected element with:

selection.call(zoom.transform, transformObject);

Where the base transform object is:

d3.zoomIdentity 

d3.zoomIdentity has scale (k) of 1, translate x (x) and y (y) values of 0. There are some methods built into the identity prototype, so a plain object won't do, but we can use the identity to set new values for k, x, and y:

var transform = d3.zoomIdentity;
transform.x = projection.translate()[0]
transform.y = projection.translate()[1]
transform.k = projection.scale()

This is very similar to the example, but rather than providing the values to the zoom behavior itself, we are building an object that describes the zoom state. Now we can use selection.call(zoom.transform, transform) to apply the transform. This will:

• set the zoom's transform to the provided values
• trigger a zoom event

In our zoom function we want to take the updated zoom transform, apply it to the projection and then redraw our paths:

function zoomed() {
  // Get the new zoom transform
  transform = d3.event.transform;
  // Apply the new transform to the projection
  projection.translate([transform.x,transform.y]).scale(transform.k);
  // Redraw the features based on the updaed projection:
  g.selectAll("path").attr("d", path);
}

Note - d3.event.translate and d3.event.scale won't return anything in d3v5 - these are now the x,y,k properties of d3.event.transform

Without a click function, we might have this, which is directly adapted from the example in the question. The click function is not included, but you can still pan.

If we want to include a click to center function like the original, we can update our transform object with the new translate and call the zoom:

function clicked(d) {
  var centroid = path.centroid(d),
      translate = projection.translate();
  // Update the translate as before:
  projection.translate([
    translate[0] - centroid[0] + width / 2,
    translate[1] - centroid[1] + height / 2
  ]);
  // Update the transform object:
  transform.x = projection.translate()[0];
  transform.y = projection.translate()[1];
  // Apply the transform object:
  g.call(zoom.transform, transform);

}

Similar to the v3 version - but by applying the zoom transform (just as we did initially) we trigger a zoom event, so we don't need to update the path as part of the click function.

All together that might look like this.

---

There is on detail I didn't include, the transition on click. As we triggering the zoomed function on both click and zoom, if we included a transition, panning would also transition - and panning triggers too many zoom events for transitions to perform as desired. One option we have is to trigger a transition only if the source event was a click. This modification might look like:

function zoomed() {
  // Was the event a click?
  var event = d3.event.sourceEvent ? d3.event.sourceEvent.type : null;
  // Get the new zoom transform
  transform = d3.event.transform;
  // Apply the new transform to the projection
  projection.translate([transform.x,transform.y]).scale(transform.k);
  // Redraw the features based on the updaed projection:
  (event == "click") ? g.selectAll("path").transition().attr("d",path) : g.selectAll("path").attr("d", path);
}