程序化放大D3

时间:2015-01-27 07:00:58

标签: javascript d3.js zoom

使用代码模式here,我想以编程方式实现语义缩放(in或out)。我不确定如何获得通过缩放增强的正确的x,y和scaleExtent术语:

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));

参见JSfiddle here。 zoomIn和zoomOut函数应模拟以SVG为中心的鼠标滚轮事件。

以下是基于以下答案的解决方案:http://jsbin.com/dociwuvacu/1

1 个答案:

答案 0 :(得分:1)

我相信我成功更新了您的小提琴,但如果没有,这里是您需要的代码类型:

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

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