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

【问题标题】：trouble with d3.js - scaling a path shaped3.js 的问题 - 缩放路径形状
【发布时间】：2013-09-03 10:12:08
【问题描述】：

我正在尝试将这个对话泡泡扩大到存在。我不太确定该怎么做，因为默认的 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")

【问题讨论】：

是的。我在测试期间尝试找到问题的解决方案时这样做了。该行已被删除。

标签： svg path d3.js scale shape

【解决方案1】：

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

在手动将行更改为所有相对路径以便我可以完成我的项目后，我找到了一个 JavaScript 脚本来将所有路径更改为相对路径。然后我可以手动将“M”属性更改为 0，以便比例可以正常工作源 (Convert SVG Path to Relative Commands)。

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

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

【讨论】：

【解决方案2】：

在<g> 或<path> 元素上使用transition.@987654321@(<em>name</em>, <em>tween</em>)。

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

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

【讨论】：

这比我在下面提出的解决方案效果更好。感谢您的帮助。