Displaying place (city) data with D3 and TopoJson

Question

I'm new to D3, so apologies if there's an obvious answer to this.

I've followed very closely Mike Bostock's example here to create a map of the continent of Africa:

http://bost.ocks.org/mike/map/

In addition, I've added zoom functionality similar to the following:

http://bl.ocks.org/mbostock/9656675

Problem is, the place/city data is present no matter the zoom level, and I only want it there when completely zoomed in. (When zoomed out it clutters the map.) I see this behavior in many other examples, but I can't pinpoint exactly how it's being facilitated. What am I missing?

Thanks in advance.

<script>
    var width = 830,
        height = 780;
        active = d3.select(null);

    var projection = d3.geo.mercator()
        .center([23, 16.063])
        .scale(550)

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

    var zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([1, 8])
        .on("zoom", zoomed);

    var svg = d3.select("#map").append("svg")
        .attr("id", "africa")
        .attr("width", width)
        .attr("height", height)
        .on("click", stopped, true);

    svg.append("rect")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
        .on("click", reset);

    var defs = svg.append("defs");

    var linearGradient = defs.append("linearGradient")
        .attr("id", "highlighted")
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "0%")
        .attr("y2", "100%");

    linearGradient.append("stop")
        .attr("class", "foregroundStop1")
        .attr("offset", "0%");

    linearGradient.append("stop")
        .attr("class", "foregroundStop2")
        .attr("offset", "100%");

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

    svg
        .call(zoom) //Delete this line to disable free zooming
        .call(zoom.event);

    d3.json("Json/africa.json", function (error, africa) {
        console.log(africa)
        g.selectAll("path")
            .data(topojson.feature(africa, africa.objects.subunits).features)
          .enter().append("path")
            .attr("class", function (d) { return "subunit " + d.id; })
            .attr("id", function (d) { return d.id; })
            .attr("data-map-id", function (d) { return d.properties.fips; })
            .attr("d", path)
            .on("click", clicked);

        g.append("path")
            .datum(topojson.mesh(africa, africa.objects.subunits, function (a, b) { return a !== b }))
            .attr("class", "mesh")
            .attr("d", path);

        g.append("path")
            .datum(topojson.feature(africa, africa.objects.places))
            .attr("class", "place")
            .attr("d", path);                

        g.selectAll(".place-label")
          .data(topojson.feature(africa, africa.objects.places).features)
        .enter().append("text")
          .attr("class", "place-label")
          .attr("transform", function (d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
          .attr("x", function (d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
          .attr("dy", ".35em")
          .style("text-anchor", function (d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
          .text(function (d) { return d.properties.name; });
    });

    function clicked(d) {
        if (active.node() === this) return reset();
        active.classed("active", false);
        active = d3.select(this).classed("active", true);

        var bounds = path.bounds(d),
            dx = bounds[1][0] - bounds[0][0],
            dy = bounds[1][1] - bounds[0][1],
            x = (bounds[0][0] + bounds[1][0]) / 2,
            y = (bounds[0][1] + bounds[1][1]) / 2,
            scale = .9 / Math.max(dx / width, dy / height),
            translate = [width / 2 - scale * x, height / 2 - scale * y];

        svg.transition()
            .duration(750)
            .call(zoom.translate(translate).scale(scale).event);

        d3.html("<..>.html", function(error, countryhtml) {
            if (error) return console.warn(error);
            $("#countrydetails").html(countryhtml);

        });
    }

    function reset() {
        active.classed("active", false);
        active = d3.select(null);

        svg.transition()
            .duration(750)
            .call(zoom.translate([0, 0]).scale(1).event);
    }

    function zoomed() {
        g.style("stroke-width", 1.5 / d3.event.scale + "px");
        g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

    }

    function stopped() {
        if (d3.event.defaultPrevented) d3.event.stopPropagation();
    }
</script>

Answer 1

In your zoom function, you need to check the current scale and, if it's large enough, enable the places. For example by making the places/labels transparent beyond a certain level like this:

function zoomed() {
    g.style("stroke-width", 1.5 / d3.event.scale + "px");
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    g.selectAll(".place").attr("opacity", zoom.scale() > 2 ? 1 : 0);
    g.selectAll(".place-label").attr("opacity", zoom.scale() > 2 ? 1 : 0);
}