trouble with d3.js - scaling a path shape
d3.js, path, scale, shapes, svg
Solution
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/
Problem
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") ```