如何在谷歌地图上缩放到d3.js svg叠加层

Question

我有一个d3.js svg，我使用OverlayView覆盖在Google地图上。然后用户在输入文本中指定邮政编码，我需要我的地图放大到该特定邮政编码。我有一个经纬度的邮政编码。但我不能让它缩放到svg。我可以使用Google的API放大，但这不是我需要的。我需要放大到svg，因为那里的数据需要以线性颜色显示。以下是我目前的代码：

function zoomtoZipCode(){
    var counties = d3.select("svg").select("g") //apply zoom here.
        .call(d3.behavior.zoom().scaleExtent([1, 7])
        .on("zoom", zoom))
        .selectAll(".counties")
        .data(conus.features)
        .enter()
}
function zoom(){
    var p = d3.select("path")[0];
    d3.select(p).attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

感谢任何帮助。谢谢。

Answer 1

我需要定义我的缩放变量并使用d3.js版本4中的术语，如下所示：

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

        svg.append("rect")
            .attr("class", "overlay")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);

        function zoomed2() {
            d3.select("#svgMap2").select("g").selectAll(".county")
                .text("text", function (d) { return d.properties.County; })
                .attr("transform", d3.event.transform)
                .select(".county").style("stroke-width", .5 / d3.event.transform.k + "px");
        }