d3.js v4プログラムによるパン+ズーム。どうやって？

Question

私は実装しようとしているものの小さな例をしました、ここは - https://jsfiddle.net/zeleniy/4sgqgcx0/です。あなたはいつものようにSVG画像をズームしてパンすることができます。しかし、私はどのように "+"と " - "ボタンをクリックしたときにプログラムでズームを実装するのか分かりません。特に彼がすでにズームイン/アウトし、元の画像をパンする場合。私たちを手伝ってくれますか？

コードの13行目にズームイベントハンドラがあります。ライン35と39に

var zoom = d3.zoom() 
    .on('zoom', function() { 
     canvas.attr('transform', d3.event.transform); 
    }); 

- ズームイベントハンドラ

d3.select('#zoom-in').on('click', function() { 
    // what here? 
}); 

d3.select('#zoom-out').on('click', function() { 
    // what here? 
}); 

ので、マウスがSVG要素の中心にあったかのように「+」アプリのユーザーのクリックはズームイン必要があるとき。そして " - "と同じです。

Answer 1

Filのおかげです。ここにはjsfiddleのupdatedバージョンがあります。

d3.select('#zoom-in').on('click', function() { 
    // Smooth zooming 
    zoom.scaleBy(svg.transition().duration(750), 1.3); 
}); 

d3.select('#zoom-out').on('click', function() { 
    // Ordinal zooming 
    zoom.scaleBy(svg, 1/1.3); 
});