D3绘制图形的自动居中

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30811721/article/details/50509175

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+")");
    }

这样就能保证每次圆都能在屏幕正中心，我还设置了一秒的动画，这样能看到圆的移动。
最后有什么问题都可以问我，我是初学者。

最后可以关注我的个人公众号，学习更多相关知识，程序员们都在这里，你又在哪里呢？