D3.js 缩放和平移

向元素添加缩放和平移行为需要三个步骤：

1. 调用d3.zoom()创建缩放行为函数
2. 添加在发生缩放或平移事件时调用的事件处理程序。事件处理程序接收可应用于图表元素的转换
3. 将缩放行为附加到接收缩放和平移手势的元素

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();

可以限制缩放和平移，以便用户只能在指定范围内缩放和平移。.scaleExtent可以使用传递数组来限制缩放，[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]]);

可以通过编程方式进行缩放和平移。例如，您可以创建单击时缩放图表的按钮。缩放行为具有以下以编程方式设置缩放和平移的方法：