富贵资源网 Design By www.hznty.com
本文实例为大家分享了d3.js实现图形缩放平移的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缩放操作</title> </head> <body> <script src = "d3.js"></script> <script> var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, {cx:250,cy:200,r:30}] var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) //定义缩放函数 var zoom = d3.behavior.zoom() .scaleExtent([1,10])//用于设置最小和最大的缩放比例 .on("zoom",zoomed) //绘制 var g = svg.append("g") .call(zoom) g.selectAll("circle") .data(circles) .enter() .append("circle") .attr("cx", function (d) { return d.cx }) .attr("cy", function (d) { return d.cy }) .attr("r", function (d) { return d.r }) .attr("fill","black") function zoomed(){ g.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")") } //d3.event.translate 是平移的坐标值,d3.event.scale 是缩放的值。 </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。