3

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")
4

2 回答 2

3

在or元素上使用。transition.attrTween(name, tween)<g><path>

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

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

于 2013-08-30T17:06:20.193 回答
1

所以问题不在于我无法让项目按比例缩放。这是当项目缩放时，“M”属性也在移动，并且由于路径上混合了相对点和绝对点，svg 元素在页面上飞来飞去。

在手动将行更改为所有相对路径以便我可以完成我的项目后，我找到了一个 javascript 脚本来将所有路径更改为相对路径。然后我可以手动将“M”属性更改为 0，以便比例可以正常工作（将 SVG 路径转换为相对命令）。

我修改了脚本以更好地满足我的需要，并使用 gist.github.com 和 bl.ocks.org 构建了这个简单的页面，因此它是一个获取所有相对路径的简单站点。它适合我的长期用例，我想我会分享给那些感兴趣的人。谢谢你的帮助。

http://bl.ocks.org/TheMcMurder/6393419（要转换的实时页面）

于 2013-08-30T20:54:59.313 回答