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彈出尺寸放大世界地圖

回答

相關問題