时间戳

首页 > 解决方案 > D3.js 缩放时重新定位元素

d3.js - D3.js 缩放时重新定位元素

问题描述

我有多个组元素，其中包含文本元素。当我用鼠标滚轮缩放时，一切都很好，我的文本仍在我的路径（多边形）内。

但是当我自动放大时，我的文本不会重新定位。

这是我的自动缩放功能，我试图通过 ID 查找特定路径，用黄色填充它，居中并缩放到它。

function findByID(ID) {
                svgContainer.selectAll("path")
                    .data(feat.features)
                    .filter(function (d) {
                        if (d.properties.myID == ID) {

                            centered = centered !== d && d;

                            var paths = svgContainer.selectAll("path")
                                .classed("active", function (d) {
                                    d === centered;
                                });

                            var t0 = projection.translate(),
                                s0 = projection.scale();

                            projection.fitSize([width, height], centered);

                            var interpolateTranslate = d3.interpolate(t0, projection.translate()),
                                interpolateScale = d3.interpolate(s0, projection.scale());

                            var interpolator = function (t) {
                                projection.scale(interpolateScale(t))
                                    .translate(interpolateTranslate(t));
                                paths.attr("d", path);
                            };

                            d3.transition()
                                .duration(5000)
                                .tween("projection", function () {

                                    return interpolator;
                                });
                            return true;
                        }
                    })
                    .attr("fill", "#e9f356");
            }

这是我使用鼠标滚轮的屏幕截图： 在此处输入图像描述

这是我的自动缩放完成后的屏幕截图。我的台词也消失了，为什么会这样？

在此处输入图像描述

编辑：这就是我添加文本的方式：

svgContainer.selectAll(null)
                .data(feat.features.filter(function (d) { return d.properties.myId > 0; }))
                .enter()
                .append("g").attr("id", "txt")
                .attr("transform", function (a) {
                    var centro = path.centroid(a);
                    return "translate(" + centro[0] + "," + centro[1] + ")";
                })
                .append("text")
                .attr("text-anchor", "middle")
                .attr("font-size", function (d) {
                    var bb = path.bounds(d)
                    return ((bb[1][0] - bb[0][0]) / 10) + "px";
                })
                .text("A/10/10/3");

标签： d3.jssvg

解决方案

好的，我做到了，但是当我尝试用鼠标滚轮缩小时，它会立即完全缩小。我怎样才能使它顺利？

function findByID(ID) {
                svgContainer.selectAll("path")
                    .data(feat.features)
                    .filter(function (d) {
                        if (d.properties.myID == ID) {

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


                            d3.select("#mainGroup").transition()
                                .duration(5000)
                                .style("stroke-width", 1.5 / scale + "px")
                                .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

                            return true;
                        }
                    })
                    .attr("fill", "#e9f356");
            }

推荐阅读