Question

我有一张基于此的D3.js地图：https://bl.ocks.org/mbostock/2374239。

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

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

工作网站位于：http://realtimeceap.brc.tamus.edu/

提前致谢。

01-28-2018状态：我仍然无法解决这个问题。当我使用鼠标滚轮放大/缩小时，我只需要帮助我将图像标记和文本保持在与所选特征相同的坐标上。初始缩放位于svg的中间，比例为= 8.如何制作标记＆＃34; STICK＆＃34;用户移动滚轮后指定的坐标？帮助！

Answer 1

通过以下方式解决了这个问题：我在＆＃34; g＆＃34;上调用了缩放功能。元素然后我创建了一个用户移动轮子的功能;从＆＃34; rect＆＃34;中调用此函数元件。

在以下位置查看工作代码：http://realtimeceap.brc.tamus.edu

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

1 个答案: