基于比例得到“相对”变换

我有下面的地图。（张贴在的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

基于比例得到“相对”变换

回答

相关问题