javascript - 为什么 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");

最后重绘是

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

Answer 1

中心仅支持鼠标滚轮移动。请参阅here举个例子。