javascript - 如何在 d3 v4 中使用 d3.transform？

Question

在 d3.js v4 中，d3.transform 方法已被删除，没有任何关于如何替换它的提示。

有谁知道如何替换下面的 d3.js v3 代码？

d3.transform(String).translate;

Answer 1

编辑 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)"));