D3弹出尺寸放大世界地图

在我的D3世界地图上，我有一个名为“main”的父组，其中有两个svg：g元素，一个用于国家，另一个用于弹出窗口。D3弹出尺寸放大世界地图

我根据svg：g元素绘制了一个名为“countries”的国家路径。并在svg：g中称为“弹出窗口”，我使用d3强制布局绘制弹出节点，其中显示多个标注为矩形。

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

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

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

2015-02-10 Usama Khalil

它通过使用公式： [缩放应用后的位置] *（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 + ")");

来源

2015-02-13 10:43:48

D3弹出尺寸放大世界地图

回答

相关问题