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

【问题标题】：D3 popups size on a Zoom in World Map放大世界地图上的 D3 弹出窗口大小
【发布时间】：2015-04-10 00:47:08
【问题描述】：

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

我在名为“国家”的 svg:g 元素下绘制国家/地区路径。在名为“弹出窗口”的 svg:g 下，我使用 d3 强制布局绘制弹出窗口节点，该布局将多个标注显示为矩形。

点击任何国家都会将该国家放大到屏幕大小。 zoom to bounding box, Mike bostok。如果我在 svg:g "countries" 上应用缩放，因为我不希望弹出窗口缩放，因为它们会变得特别大。

由于较小国家/地区的边界框将具有较大的比例，而较大的国家/地区将具有较小的比例值。

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

【问题讨论】：

标签： javascript d3.js zooming force-layout

【解决方案1】：

通过使用一个公式，它就像一个魅力： [应用缩放后的位置] * (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 + ")");

【讨论】：