D3绘制图形的自动居中
D3绘制图形的自动居中
看得网上很多D3的资料,但是绘制的图形都没能自动居中,现在用一个简单的实例来自动居中图形。
我们先生成一个svg画布,注意是用屏幕宽高。
x = document.body.clientWidth - 100;
y = document.body.clientHeight - 100;
var svg = d3.select("body").append("svg")
.attr("width",x)
.attr("height",y);
用D3的path绘制一个圆,我们把圆的位置移动到了屏幕正中心。
pathover = d3.select("svg").append("path")
.attr("d",arrow_path)
.attr("stroke","red")
.attr("fill","none")
.attr("transform","translate("+(x)/2+","+(y)/2+")");
最后就是当屏幕大小改变的时候触发一个函数,然后把圆移动到屏幕的正中心。
function resizesvg(){
x = document.body.clientWidth - 100;
y = document.body.clientHeight - 100;
//svg.transition()
/// .duration(1000)
// .attr("width",x)
// .attr("height",y);
pathover.transition()
.duration(1000)
.attr("transform","translate("+((x))/2+","+(y)/2+")");
}
这样就能保证每次圆都能在屏幕正中心,我还设置了一秒的动画,这样能看到圆的移动。
最后有什么问题都可以问我,我是初学者。
最后可以关注我的个人公众号,学习更多相关知识,程序员们都在这里,你又在哪里呢?
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步