javascript - 使用 d3.js 就地旋转 svg

Question

我正在尝试使用 d3.js 旋转带有内容的 svg 元素，但它总是从 View 框中出来，我想要实现的是原地旋转 svg 然后稍后我可以将 svg 旋转到 0,90,180,270 deg 但现在我的目标是将其旋转到位。

我的代码在下面(我删除了不相关的代码)

 var svgContainer = d3.select("body").append("svg")                                          
                    .attr("width",121)                                   
                    .attr("height", 108)
               //below is my code to rotate the svg
                attr('transform', 'rotate(180 0 0)')

我的原始 svg

放置 attr('transform', 'rotate(180 0 0)') 时我的输出

我想要实现的目标

我的 fiddle

https://jsfiddle.net/ewumar8d/4/

Answer 1

您需要围绕其中心而不是 0,0 旋转 svg。

所以首先你需要像这样向 svg 添加一个组:

var svgContainer = d3.select("body").append("svg")
.attr("width", 121 + "mm")
.attr("height", 108 + "mm")
.attr('id','board') 
.style('background','#f4f4f4')
.style("border", "1px solid black").append("g");//add agroup

向该组添加所有数据点。

接下来为了旋转我们需要找到我们需要旋转的中心。

            svgContainer.attr('transform',function(){
                var me = svgContainer.node()
                var x1 = me.getBBox().x + me.getBBox().width/2;//the center x about which you want to rotate
                var y1 = me.getBBox().y + me.getBBox().height/2;//the center y about which you want to rotate

                return `rotate(180, ${x1}, ${y1})`;//rotate 180 degrees about x and y
            }); 

工作代码here