d3.behavior.zoom() 加载图像时设置初始化缩放倍数跟移动大小后,再次用鼠标滚轮进行缩放时,无法正常缩放的问题

var zoom = d3.behavior.zoom()//缩放配置,

        .scaleExtent([0.4, 5])//缩放比例

        .on("zoom", zoomed);

function zoomed(){//缩放函数

     svg.selectAll("g").attr("transform",//svg下的g标签移动大小

     "translate("  +d3.event.translate + ")scale(" +d3.event.scale + ")");

}

 

var svg = d3.select("#keyword").append("svg")//添加svg元素进行图形的绘制

        .attr("width", width)

        .attr("height", height)

        .call(zoom);

 

/******************以下部分是缩放的初始值跟移动大小设置【开始】*****************/

var paramScale= 0.8;//初始时缩放倍数

var paramTransform= [442,150];//初始时标签移动大小

svg.selectAll("g").attr("transform",//svg下的g标签移动大小及缩放倍数

    "translate("+paramTransform.toString()+")scale("+paramScale+")");

 

//注意:一定要加上如下配置,否则初始化后无法正常缩放

zoom.translate(paramTransform);

zoom.scale(paramScale);

 

/******************以下部分是缩放的初始值跟移动大小设置【结束】*****************/

 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 22
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值