d3.js zoom中的translateBy，scaleBy，translateTo，scaleTo

文章中假设svg的长为width，高为height

1.scaleTo

zoom.scaleTo(selector，n，[x1,y1])

scaleTo的放大过程：将svg的坐标x，y都放大到n倍，目标元素的相应属性也放大n倍，同时会将目标进行位移，默认的位移大小为x = 0 - width / 2 *( n - 1) , y = 0 - height/ 2 *( n - 1)。

所以当元素放大后默认情况下元素会向左上方位移 ，但是当我们放大时，大多数情况我们还是希望元素还是停留在当前的一个位置，仅仅是他的视觉面积放大了，这是后就需要scaleTo的第三个参数了，当我们设置了[x1,y1]后，位移的大小就会变为x = 0 - x1 *( n - 1) , y =0 - y1 *( n - 1)。

想象一下我们的元素进行放大后，坐标x，y都会放大到n倍，加入我们的目标元素的坐标为a，
b那么放大后他相对于svg的坐标零点的位置便从（a，b）变为了（na，nb），当我们不设置[x1,y1]时，它又会进行x = 0 - width / 2 *( n - 1) , y = height/ 2 *( n - 1)的位移，我们的视觉上的位置就会变为（na- width / 2 *( n - 1)，nb- height/ 2 *( n - 1)），而我们设置了[x1,y1]后，视觉上的位置就会变为（na- x1 *( n - 1)，nb- y1 *( n - 1)），此时我们就会容易发现如果当我们设置的[x1,y1]为我们进行变换前的坐标的化，那我们看到的元素就仅仅是元素大小的变化，而不会进行位移

总的来说scaleTo会导致元素放大n倍，不设置[x1,y1]时， 元素的坐标（a，b）会变为 （na- width / 2 *( n - 1)，nb- height/ 2 *( n - 1)），当设置了[x1,y1]时，元素的坐标（a，b）会变为 （na- x1 *( n - 1)，nb- y1 *( n - 1)） 。

2.scaleBy

scaleBy同scaleTo一样，不过他与scaleTo的区别在于，对同一个元素多次调用scaleTo是不起效果的，而对scaleBy来说是会多次作用于一个元素的，正如他们的名称scaleTo是变化到，scaleBy是在当前的基础上进行变化

3.translateTo

zoom.translateTo(selector，x，y，[x1,y1])
translateTo可以对元素坐标进行位移，具体的计算为
当不设置[x1,y1])时，dx = width / 2 - x， dy = height/ 2 - y，即变成translate(dx，dy)
当设置[x1,y1])时，dx = x1 - x， dy = y1 - y，即变成translate(dx，dy)

之所以后说translate相关的api时因为translate的api会受到scaleBy和scaleTo的影响，如果我们同时使用了scaleTo，并且变化了n倍，那么具体的计算变为
当不设置[x1,y1])时，dx = width / 2 - xn， dy = height/ 2 - ny，即变成translate(dx，dy)
当设置[x1,y1])时，dx = x1 - nx， dy = y1 - ny，即变成translate(dx，dy)

4.translateBy

translateBy和translateTo比较类似，也是进行一个元素的位移
zoom.translateTo(selector，x，y)，具体的计算为
dx = x， dy = y，即变成translate(dx，dy)

同时translateBy也会受到scaleBy和scaleTo的影响，如果我们同时使用了scaleTo，并且变化了n倍，那么具体的计算变为
dx = nx - width / 2 * n， dy = ny - width / 2 * n ，即变成translate(dx，dy)

当然我这里的translateBy和translateTo计算中scaleTo并没有设置基准数据[x1,y1],如果设置了计算可能有些改动，但是方法是一样的，只不过换了下数据而已