向元素添加縮放和平移行為需要三個步驟：
- 調(diào)用
d3.zoom()創(chuàng)建縮放行為函數(shù) - 添加在發(fā)生縮放或平移事件時調(diào)用的事件處理程序裂七。事件處理程序接收可應用于圖表元素的轉(zhuǎn)換
- 將縮放行為附加到接收縮放和平移手勢的元素
let data = [], width = 600, height = 400, numPoints = 100;
let zoom = d3.zoom()
.on('zoom', handleZoom);
function handleZoom(e) {
d3.select('svg g')
.attr('transform', e.transform);
}
function initZoom() {
d3.select('svg')
.call(zoom);
}
function updateData() {
data = [];
for(let i=0; i<numPoints; i++) {
data.push({
id: i,
x: Math.random() * width,
y: Math.random() * height
});
}
}
function update() {
d3.select('svg g')
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', 3);
}
initZoom();
updateData();
update();
可以限制縮放和平移，以便用戶只能在指定范圍內(nèi)縮放和平移。.scaleExtent可以使用傳遞數(shù)組來限制縮放忽妒，[min, max]其中min是最小比例因子,max是最大比例因子;使用.translateExtent指定[[x0, y0], [x1, y1]]限制用戶平移的范圍浑侥。
let zoom = d3.zoom()
.scaleExtent([1, 5]);
let width = 600, height = 400;
let zoom = d3.zoom()
.scaleExtent([1, 5])
.translateExtent([[0, 0], [width, height]]);
可以通過編程方式進行縮放和平移详炬。例如盐类，您可以創(chuàng)建單擊時縮放圖表的按鈕『墼ⅲ縮放行為具有以下以編程方式設(shè)置縮放和平移的方法：
| 方法名稱 | 描述 |
|---|---|
.translateBy |
將給定的x, y偏移量添加到當前變換 |
.translateTo |
設(shè)置變換傲醉，使給定x, y坐標居中（或定位在給定點上[px, py]） |
.scaleBy |
將當前比例因子乘以給定值 |
.scaleTo |
將比例因子設(shè)置為給定值 |
.transform |
將變換設(shè)置為給定的變換。（d3.zoomIdentity)用于創(chuàng)建縮放變換呻率。） |
