Question

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

Answer 1

在缩放功能中，您需要检查当前比例，如果它足够大，则启用场所。例如，通过使地点/标签透明超出某个级别，如下所示：

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

使用D3和TopoJson显示地点（城市）数据

1 个答案: