在我的 D3 世界地图上,我有一个名为“main”的父 svg:g 组,它有两个 svg:g 元素,一个用于国家/地区,另一个用于弹出窗口。
我在名为“国家”的 svg:g 元素下绘制国家路径。在名为“popups”的 svg:g 下,我使用 d3 强制布局绘制弹出窗口节点,该布局将多个标注显示为矩形。
单击任何国家/地区都会将该国家/地区缩放到屏幕大小。 zoom to bounding box, 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 + ")");
关于javascript - 放大世界地图上的 D3 弹出窗口大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28424004/