trouble with d3.js - scaling a path shape

Question

I'm trying to scale this speech bubble into existence. I'm not really sure how to do it because the default d3 scale is changing the area where it starts drawing.

var svgHeight = 1000
var svgWidth = 1000
var floatycircleRadius = 30
var textColor = "#FFFFFF"

var svg = d3.select("body").append("svg")
    .attr("width", svgHeight)
    .attr("height", svgWidth)


var floatycontainer = svg.append("g");

var floatygroup = floatycontainer.append("g")

var floatypath = floatygroup.append("path")
    .attr("d", "m125.512,0h-66C26.645,0,0,26.482,0,59.35c0,28.574,20.142,52.312,47,58.029V145l26.283-26.283, l52.229,0.064c32.868,0,59.512-26.563,59.512-59.431S158.38,0,125.512,0z")
    .style("fill", "#90C4E4")

floatygroup.attr("transform", "translate(500, 500)")

floatycontainer.attr("transform", "scale(1)");

floatycontainer.transition().duration(2000).attr("transform", "0")

Answer 1

Use transition.attrTween(name, tween) on the <g> or <path> element.

.attrTween("transform", function(d, i, a) {
    return d3.interpolateString(a, 'scale(1)');
});

http://jsfiddle.net/Wexcode/2jFP5/

Answer 2

So the problem wasn't that I couldn't get the item to scale. It's that when the item was scaling the "M" attribute was also shifting and the svg element was flying across the page due to mixed relative and absolute points on the path.

After changing the line manually to all relative so I could finish my project I found a javascript script to change all paths to relative. Then I could manually change the "M" attribute to 0 so the scale would work correctly source (Convert SVG Path to Relative Commands).

I modified the script to better suit my needs and build this simple page using gist.github.com and bl.ocks.org so it's a simple site to get the all relative path. It fits my long term use case and I thought I'd share it for those interested. Thanks for your help.

http://bl.ocks.org/TheMcMurder/6393419 (live page to convert)