获得基于规模的“相对”变换

Question

我有以下地图。 （在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 hawaii向右和向下移动。

我可以访问自己项目中的d3路径对象，但我不确定这个计算是否需要它们。

Answer 1

在特定点周围向上（或向下）扩展某些内容的最简单方法是添加一个包含三个步骤的转换：

1. translate()到原点（0,0）
2. scale()
3. 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