Почему не работает d3.behavior.zoom(). Center()?

Question

У меня есть две кнопки, которые увеличивают и уменьшают масштаб. Я пытаюсь получить функциональность масштабирования в центре посередине, поэтому, когда я увеличиваю масштаб, она увеличивается в середине, а не там, где находятся кнопки. Я определил переменную zoomlistener так.

var width = 800; 
var height = 500; 

var zoomlistener = d3.behavior.zoom() 
    .center([width/2, height/2]) 
    .on("zoom", redraw); 

Тогда позвала его следующим ...

var zoomfactor = 1; 
d3.select(".zoomin").on("click", function(){ 
    zoomfactor = zoomfactor + 0.2; 
    zoomlistener.scale(zoomfactor).event(d3.select(".graphmap")); 
}); 

d3.select(".zoomout").on("click", function(){ 
    zoomfactor = zoomfactor - 0.2; 
    zoomlistener.scale(zoomfactor).event(d3.select(".graphmap")); 
}); 

Но когда я увеличить в нем по-прежнему увеличивает масштаб, где кнопки.

.graphmap является

var svg = d3.select(".graph").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("class", "graphmap"); 

и finnally перерисовывать является

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

Answer 1

Center поддерживается только для движений MouseWheel. См. Пример here.