放大世界地图上的D3弹出窗口大小

D3 popups size on a Zoom in World Map

本文关键字：窗口大小 D3 世界地图 放大      更新时间：2023-09-26

在我的D3世界地图上，我有一个名为"main"的父svg:g组，它有两个svg:g元素，一个用于国家，另一个用于弹出窗口。

我在svg:g元素"countries"下绘制了countries路径。在名为"popups"的svg:g下，我使用d3force布局绘制popups节点，该布局将多个callout显示为矩形。

点击任何国家/地区都会将该国家/地区缩放到屏幕大小。放大到边界框，Mike bostok。如果我在svg:g"国家"上应用缩放，因为我不希望弹出窗口缩放，因为它们会变得特别大。

由于较小国家的边界框将具有较大的规模，而较大国家的边界值将较小。

现在，我应该如何计算Svg:g"弹出窗口"的平移和缩放，以便弹出窗口的矩形大小和字体保持不变。

它使用了一个公式，就像一个符咒：[应用缩放后的位置]*（1-scalePopup）。有关如何计算变量scalePopup ，请参阅以下内容

  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;
    var scale = countryZoomScale(Math.max(dx, dy)) / Math.max(dx / width, dy / height),
        translate = [width / 1.5 - scale * x, height / 2 - scale * y];
    var scalePopup = map.zoomFactor / scale;
    var popupLayer = d3.select('.popupLayer');
    var centroid = path.centroid(d);
    popupLayer.attr("transform", "translate(" + centroid[0] * (1 -      scalePopup) + "," + centroid[1] * (1 - scalePopup) + ")scale(" + scalePopup + ")");
相关文章：