在 d3.js v4 中,d3.transform
方法已被删除,没有任何关于如何替换它的提示。
有谁知道如何替换下面的 d3.js v3 代码?
d3.transform(String).translate;
最佳答案
编辑 2016-10-07:有关更通用的方法,请参阅下面的附录。
根据变更日志,它已经消失了。 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)"))
这会使用标准 DOM 方法创建一个用于计算目的的虚拟 g
元素,并将其 transform
属性设置为包含您的转换的字符串。然后调用 SVGTransformList
的 .consolidate()
将可能很长的转换列表合并为单个 SVGTransform
的界面属于 SVG_TRANSFORM_MATRIX
类型,在其 matrix
属性中包含所有转换的简化版本。这SVGMatrix
每个定义在其属性 e
和 f
中保存翻译值。
使用此函数 getTranslation()
您可以重写 D3 v3 语句
d3.transform(transformString).translate;
作为
getTranslation(transformString);
附录
因为这个答案随着时间的推移引起了一些兴趣,所以我决定组合一个更通用的方法,不仅能够返回翻译,而且能够返回转换字符串的所有转换定义的值。基本方法与我在上面的原始帖子中列出的相同,加上来自 transform/decompose.js
的计算。 .此函数将返回一个对象,该对象具有所有转换定义的属性,与前一个 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)"));
关于javascript - 如何在 d3 v4 中使用 d3.transform?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38224875/