用D3和TopoJson显示地点(城市)数据

我是D3的新手，所以抱歉，如果有一个明显的答案。

我非常密切地按照Mike Bostock的例子来创建非洲大陆的地图:

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

此外，我还添加了类似以下的缩放功能:

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

问题是，无论缩放级别如何，地点/城市数据都存在，我只希望它在完全放大时存在。(放大后会使地图混乱。)我在许多其他例子中看到这种行为，但我不能准确地指出它是如何被促进的。我错过了什么?

提前感谢。

<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>

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);
}