一尘不染

在D3 v4中替换d3.transform

javascript

在D3.js v4中,删除了d3.transform方法,但没有有关如何替换它的任何提示。有谁知道如何替换以下D3.js v3指令?

d3.transform(String).translate;

阅读 329

收藏
2020-05-01

共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每定义保存值,在其属性翻译ef

使用此功能,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)"));
2020-05-01