Масштабирование с использованием D3

Question

Как бы увеличить масштаб до определенной точки на svg в определенный момент, а затем уменьшить масштаб до всего svg. Есть только два состояния, я не требую масштабирования прокрутки мыши или кнопки увеличения, уменьшения масштаба.

Я искал и нашел .zoom в документации d3, но не уверен, как применять в моих обстоятельствах. Я видел только масштаб прокрутки, который слишком сложный.

Answer 1

Checkout как мышь трансфокации обычно реализуется:

var svg = d3.select("#svg") 
    .call(d3.behavior.zoom().on("zoom", redraw)) 

function redraw() { 
    console.log("translate: ", d3.event.translate, "scale:", d3.event.scale); 
    svg.attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + " scale(" + d3.event.scale + ")"); 
} 

скроллинг выложит что-то вроде:

translate: [-66.3438, -36.359] scale: 1.1809 

Чтобы избежать реализации прокрутки зума, вы можете напрямую изменить атрибут преобразования вашего SVG как и функция перерисовки. Просто используйте свои собственные значения вместо d3.event.translate. Например:

svg.attr("transform", 
     "translate(" + [0,0] + ")" 
     + " scale(" + 2 + ")"); 

будет увеличивать 2x до центра svg. Использование 5 вместо 2 увеличило бы 5x.

click to zoom map пример хороший демонстрация как это сделать