StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
14883942
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-02-14T20:59:33.283
FavoriteCount
0
LastActivityDate
2013-02-18T21:28:47.167
LastEditDate
2013-02-18T21:28:47.167
LastEditorUserId
406226
OwnerUserId
406226
ParentId
12494447
PostTypeId
2
Score
4
ViewCount
0
LastEditorDisplayName
text
Body
To rotate an SVG object on an arbitrary axis, you need two transformations: <code>translate</code> (to set the axis) and <code>rotate</code>. What you really want is to apply the <code>translate</code> fully first and then rotate the already moved element, but it appears that <code>translate</code> and <code>rotate</code> operate independently and simultaneously. This ends at the right place, but animating the <code>translate</code> is essentially moving the axis during rotation, creating the wobble. You can isolate the <code>translate</code> from the <code>rotate</code> by having them occur at separate places in the SVG element hierarchy. For example, take a look at the following: <pre><code><g class="outer"> <g class="rect-container"> <rect class="rotate-me" width=200 height=100 /> </g> </g> </code></pre> You can center the <code><rect></code> on (0,0) with <code>translate (-100, -50)</code>. It will wobble if you apply your rotation to the <code><rect></code> element, but it will rotate cleanly if you <code>rotate</code> the <code>g.rect-container</code> element. If you want to reposition, scale, or otherwise transform the element further, do so on <code>g.outer</code>. That's it. You now have full control of your transforms. Finding a <code><rect></code>'s center is easy, but finding the center of a <code><path></code>, <code><g></code>, etc. is much harder. Luckily, a simple solution is available in the <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox" rel="nofollow">.getBBox()</a> method (code in CoffeeScript; see below for a JavaScript version*): <pre><code>centerToOrigin = (el) -> boundingBox = el.getBBox() return { x: -1 * Math.floor(boundingBox.width/2), y: -1 * Math.floor(boundingBox.height/2) } </code></pre> You can now center your element/group by passing the non-wrapped element (using D3's <code>.node()</code> method) <pre><code>group = d3.select("g.rotate-me") center = centerToOrigin(group.node()) group.attr("transform", "translate(#{center.x}, #{center.y})") </code></pre> For code that implements this on a both a single <code><rect></code> and <code><g></code> of of 2 <code>rect</code>s with repositioning and scaling, <a href="http://jsfiddle.net/rdickert/hQBEw/1/" rel="nofollow">see this fiddle</a>. <hr> *Javascript of the above code: <pre><code>var center, centerToOrigin, group; centerToOrigin = function(el) { var boundingBox; boundingBox = el.getBBox(); return { x: -1 * Math.floor(boundingBox.width / 2), y: -1 * Math.floor(boundingBox.height / 2) }; }; group = d3.select("g.rotate-me"); center = centerToOrigin(group.node()); group.attr("transform", "translate(" + center.x + ", " + center.y + ")"); </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCan d3's transition and rotation play well together?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USrdickert
UserOwnerUserId
1. USrdickert
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.