基於比例得到「相對」變換

我有下面的地圖。（張貼在的jsfiddle因爲片段太多字符）基於比例得到「相對」變換

https://jsfiddle.net/Tschallacka/n6cuxv7d/

我想因爲他們太小，在大畫面消失的那一刻規模夏威夷羣島起來，特別是在移動。

現在我將以下函數拼湊在一起，以獲得可靠的2因子尺度，該尺度在不同格式下都能很好地工作。

var rect = $('[data-country-hasc="US.HI"]').get(0).getBBox(); 

var $hawaii = $('[data-country-hasc="US.HI"]'); 
var s = 2.0; 
var t = [0- rect.x - ((rect.width * s) - rect.width),0-rect.y- ((rect.height * s) - rect.height)]; 

$hawaii.attr('transform', [ 
         "translate(" + t + ")", 
         "scale(" + s + ")" 
        ].join(" "));

但我需要的是擴展與任何規模的給定數量的夏威夷羣島的可靠方式，並且讓他們在他們的相對位置。

因此，如果我以2.5或3的比例給予縮放，它仍然會在該位置呈現，但會變得更大。

要看到問題，看到這樣的jsfiddle：

https://jsfiddle.net/Tschallacka/dknojufd/

隨着2.2夏威夷的值被轉移到右側和底部。

我確實有權訪問我自己的項目中的d3路徑對象，但我不確定它們是否需要進行此計算。

來源

2017-07-03 Tschallacka

我不清楚你想做什麼，你還沒有做。你有一個'translate（）'調整你的變換。你還想要什麼？ –

在jsfiddle中將比例值更改爲2.5。夏威夷的圖表並沒有保持「就位」，因爲座標系統會沿着這個方向擴展，但我不知道如何解釋定位系統相對於原始定位系統的變化，因此對於「觀察者」它似乎會保持原樣。看到這個與規模2.2 https://jsfiddle.net/Tschallacka/dknojufd/夏威夷已經轉移到右邊。我希望它留在原地，但變得更大。 – Tschallacka

規模的東西向上（或向下）圍繞一個特定點的最簡單方法，就是添加一個轉換，有三個步驟：

translate()原點（0,0）
scale()
translate()回所需的位置

所以你的情況，它看起來是這樣的：

var $hawaii = $('[data-country-hasc="US.HI"]'); 
var bbox = $hawaii.get(0).getBBox(); 

var cx = bbox.x + bbox.width/2; 
var cy = bbox.y + bbox.height/2; 
var s = 2; 

$hawaii.attr('transform', "translate(" + [cx,cy] + ") " + 
          "scale(" + s + ") " + 
          "translate(" + [-cx,-cy] + ")");

在這個例子中，我選擇了夏威夷的中心作爲比例尺的中心點（cx，cy）。

Demo fiddle

來源

2017-07-03 15:31:19

我不知道你可以添加翻譯兩次。我知道這是重置爲0，因爲我知道從3D編程，但我不知道如何做到這一點，因爲我認爲你只能添加一次翻譯的東西。謝謝！ – Tschallacka

基於比例得到「相對」變換

回答

相關問題