Svg d3.js有问题-缩放路径形状
我正试图扩大这个演讲泡沫的规模。我真的不知道怎么做,因为默认的d3比例正在改变它开始绘制的区域Svg d3.js有问题-缩放路径形状,svg,path,d3.js,scale,shape,Svg,Path,D3.js,Scale,Shape,我正试图扩大这个演讲泡沫的规模。我真的不知道怎么做,因为默认的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) va
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")
在
或
元素上使用转换。(名称,tween)
.attrTween("transform", function(d, i, a) {
return d3.interpolateString(a, 'scale(1)');
});
所以问题不在于我无法将项目缩放。这是因为当项目缩放时,“M”属性也在移动,svg元素由于路径上的混合相对点和绝对点而在页面上飞过 在手动将行更改为all relative以便完成项目后,我找到了一个javascript脚本,将所有路径更改为relative。然后,我可以手动将“M”属性更改为0,这样比例就可以正常工作 我修改了脚本以更好地满足我的需要,并使用gist.github.com和bl.ocks.org构建了这个简单的页面,因此它是一个获取所有相关路径的简单站点。它适合我的长期使用案例,我想我会把它分享给那些感兴趣的人。谢谢你的帮助
(要转换的实时页面)是。我在测试期间这样做,同时试图找到问题的解决方案。这一行后来被删除了。这比我下面提出的解决方案效果更好。谢谢你的帮助。