svg - d3.js 的问题 - 缩放路径形状

Question

我正在努力使这个对话泡泡变得存在。我不太确定该怎么做，因为默认的 d3 比例正在改变它开始绘制的区域。

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

使用 transition.<a href="https://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween" rel="noreferrer noopener nofollow">attrTween</a>(<em>name</em>, <em>tween</em>)在 <g> 上或 <path>元素。

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

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