在D3.js v4中,删除了d3.transform方法,但没有有关如何替换它的任何提示。有谁知道如何替换以下D3.js v3指令?
d3.transform(String).translate;
编辑2016-10-07: 有关更一般的方法,请参见下面的附录。
根据变更日志,它已消失。transform/decompose.js不过,中有一个函数,供内部使用进行计算。可悲的是,它没有暴露于外部使用。
transform/decompose.js
也就是说,即使不使用任何D3,也很容易做到:
function getTranslation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseVal.consolidate().matrix; // As per definition values e and f are the ones for the translation. return [matrix.e, matrix.f]; } console.log(getTranslation("translate(20,30)")) // simple case: should return [20,30] console.log(getTranslation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"))
这将g使用标准DOM方法创建一个用于计算目的的虚拟元素,并将其transform属性设置为包含转换的字符串。然后.consolidate(),它调用SVGTransformList接口以将可能很长的转换列表合并为一个SVGTransform类型SVG_TRANSFORM_MATRIX,该类型在其matrix属性中包含所有转换的简化版本。这种SVGMatrix每定义保存值,在其属性翻译e和f。
g
transform
.consolidate()
SVGTransformList
SVGTransform
SVG_TRANSFORM_MATRIX
matrix
SVGMatrix
e
f
使用此功能,getTranslation()您可以重写D3 v3语句
getTranslation()
d3.transform(transformString).translate;
如
getTranslation(transformString);
因为随着时间的推移,这个答案已经引起了人们的兴趣,所以我决定组合一个更通用的方法,该方法不仅可以返回转换,还可以返回转换字符串的所有转换定义的值。基本方法与我上面原始帖子中列出的方法相同,加上从中得到的计算transform/decompose.js。该函数将返回一个具有所有转换定义属性的对象,就像前一个d3.transform()一样。
d3.transform()
function getTransformation(transform) { // Create a dummy g for calculation purposes only. This will never // be appended to the DOM and will be discarded once this function // returns. var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Set the transform attribute to the provided string value. g.setAttributeNS(null, "transform", transform); // consolidate the SVGTransformList containing all transformations // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get // its SVGMatrix. var matrix = g.transform.baseVal.consolidate().matrix; // Below calculations are taken and adapted from the private function // transform/decompose.js of D3's module d3-interpolate. var {a, b, c, d, e, f} = matrix; // ES6, if this doesn't work, use below assignment // var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5 var scaleX, scaleY, skewX; if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX; if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX; if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY; if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX; return { translateX: e, translateY: f, rotate: Math.atan2(b, a) * 180 / Math.PI, skewX: Math.atan(skewX) * 180 / Math.PI, scaleX: scaleX, scaleY: scaleY }; } console.log(getTransformation("translate(20,30)")); console.log(getTransformation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"));