在d3.v4中,如何使用按钮来控制缩放

时间:2018-06-04 09:38:20

标签: javascript d3.js

任何人都可以帮我在d3版本4中使用按钮控制缩放(放大图像中心)。提前感谢

let zoom = d3.zoom().on("zoom", function(){ // zoom事件
        //console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
        //console.log(`D3: : ${d3.event.transform}`);
        g.attr("transform", d3.zoomTransform(svg.node()));
});

svg.call(zoom);

d3.select("#reset").on("click", function(d){
        svg.call(zoom.transform, d3.zoomIdentity);
});

d3.select("#zoom").on("click", function(d) {
        zoom.scaleBy(svg,2);
        let tran = d3.zoomTransform(svg.node());
        //svg.attr("transform", "translate(" + tran.x + "," + tran.y + ") scale (" + tran.k + ")"); 
        //console.log(tran);
});

d3.select("#translateX").on("click", function(d) {
        zoom.translateBy(svg, -10, 10);
        let tran = d3.zoomTransform(svg.node());
        // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
        console.log(tran);
});

0 个答案:

没有答案