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。

为什么不用d3.behavior.zoom（）。center（）工作？

1 个答案: