javascript - Rotate svg in place using d3.js - Stack Overflow

admin管理员组

文章数量:1296259

I am trying to rotate a svg element with content using d3.js but it always gets out from the viewbox, what i want to achieve is rotate svg in place then later i can rotate the svg to 0,90,180,270deg but for now my goal is to rotate it in place.

My code is below ( i removed the irrelevant codes)

 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)')

My original svg

My output when putting attr('transform', 'rotate(180 0 0)')

What i want to achieve

My fiddle

/

I am trying to rotate a svg element with content using d3.js but it always gets out from the viewbox, what i want to achieve is rotate svg in place then later i can rotate the svg to 0,90,180,270deg but for now my goal is to rotate it in place.

My code is below ( i removed the irrelevant codes)

 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)')

My original svg

My output when putting attr('transform', 'rotate(180 0 0)')

What i want to achieve

My fiddle

https://jsfiddle/ewumar8d/4/

• javascript
• d3.js
• svg

Share Follow edited Jun 29, 2017 at 7:43 KaoriYui asked Jun 29, 2017 at 6:03 KaoriYuiKaoriYui 92211 gold badge1616 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need to rotate the svg about its center and not 0,0.

So first you will need to add a group to the svg like this:

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

To this group add all your data points.

Next in order to rotate we need find the center about which we need to rotate.

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

working code here

try this:

   .attr('transform', 'rotate(180 0 0)')

本文标签： javascriptRotate svg in place using d3jsStack Overflow