在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)"))

这将g使用标准DOM方法创建一个用于计算目的的虚拟元素，并将其transform属性设置为包含转换的字符串。然后.consolidate()，它调用SVGTransformList接口以将可能很长的转换列表合并为一个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)"));