D3.js：放大和缩小时如何保持标记和文本在同一位置

我有一个基于此的D3.js地图：

我添加了一个自定义标记和一个用户放大到县的功能文本。但是，当我放大或缩小时，标记和文本不会停留在与县相同的位置。我的缩放功能如下：

function zoomToCounty(stname, cntyname) {
    d3.json("/topo/us-wgs84.json", function (us) {
        var t = projection.translate(); // the projection's default translation
        var s = projection.scale() // the projection's default scale

        //initialize marker
        d3.selectAll(".mark").remove();
        d3.selectAll("text").remove();

        //reset active to inactive size and color            
        d3.select("#svgMap2").select("g").select(".active")
            .style("stroke-width", "0.5px")
            .style("stroke", "#808080");

        d3.selectAll(".county")
            .classed("active", function (d) {
                if (d.properties.StateName === stname && d.properties.County === cntyname) {
                    var zoom = d3.zoom()
                    .scaleExtent([1, 6])
                    .on("zoom", zoomed3);

                    svg.select("rect")
                    .call(zoom);

                    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 = 0.9 / Math.max(dx / width, dy / height),
                    translate = [width / 2 - scale * x, height / 2 - scale * y];

                    //get centroid
                    var center = path.centroid(d);

                    //create marker
                    d3.select("#svgMap2").select("g")
                        .append("image")
                        .attr("xlink:href", "/images/marker2.png")
                        .attr("width", 14)
                        .attr("height", 20)
                        .attr("class", "mark")
                        .attr("transform", function (d) {
                            return "translate(" + center + ")";
                        });

                    //add text
                    d3.select("#svgMap2").select("g")
                        .append("text")
                        .style("fill", "#000")
                        .attr("x", x)
                        .attr("y", y)
                        .attr("dy", ".05em")    //set offset y position
                        .attr("text-anchor", "middle")  //set anchor y justification
                        .text(cntyname);

            svg.transition()
                .duration(750)
                .call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));

            return true;
        }
    })
}); //end d3.json

工作网站可在以下网址找到：

提前谢谢

2018年1月28日状态：我仍然无法修复此问题。当我使用鼠标滚轮放大/缩小时，我只需要关于如何将图像标记和文本保持在与所选功能相同的坐标上的帮助。初始缩放位于svg的中间，缩放比例为8。当用户移动轮子时，如何使标记“粘住”到指定的坐标？救命啊

通过以下方式解决了此问题： 1.然后我调用了“g”元素上的缩放函数 2.我为用户移动控制盘创建了一个函数；从“rect”元素调用此函数

在以下位置查看工作代码：