简体   繁体   中英

Programatic zoom in D3

Using the code pattern here , I want to programmatically achieve semantic zooming (in or out). I'm unsure how to get the proper x, y, and scaleExtent terms that are augmented via the zoom:

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));

See JSfiddle here . The zoomIn and zoomOut functions should simulate the mousewheel events centered in the SVG.

Here's a solution based on the answer below: http://jsbin.com/dociwuvacu/1

I believe I successfully updated your fiddle, but in case not, here is the type of code you would need:

function zoomIn() {    
    zoomer.scale(zoomer.scale()+.1);
    zoomer.event(svg);
}

function zoomOut() {
    zoomer.scale(zoomer.scale()-.1);
    zoomer.event(svg);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM