替换D3 v4中的d3.transform [英] Replacing d3.transform in D3 v4

问题描述

在D3.js v4中，d3.transform方法已删除，没有任何有关如何替换它的提示。
有谁知道如何替换下面的D3.js v3指令？

  d3.transform（String）.translate ; 
  

解决方案

/ strong>有关更一般的方法，请参阅下面的附录。

---

根据更改日志， <$ c $中有一个函数c> transform / decompose.js ，这是内部使用的计算。很遗憾，它不会暴露给外部使用。

也就是说，即使不使用任何D3也可以轻松完成：

>

  function getTranslation（transform）{//创建一个虚拟g仅用于计算。这将永远不会附加到DOM，并且将在此函数//返回时被丢弃。 var g = document.createElementNS（http://www.w3.org/2000/svg，g）; //将transform属性设置为提供的字符串值。 g.setAttributeNS（null，transform，transform）; //将包含所有变换的SVGTransformList整合到SVG_TRANSFORM_MATRIX类型的单个SVGTransform，并获取其SVGMatrix。 var matrix = g.transform.baseVal.consolidate（）。matrix; //根据定义，值e和f是翻译的值。 return（matrix.e，matrix.f];} console.log（getTranslation（translate（20,30）））// simple case：should return [20,30] console.log（getTranslation ）skewX（20）translate（20,30）translate（-5,40））） 

这将使用标准DOM方法创建一个用于计算目的的 g 元素，并设置 transform 属性到包含您的转换的字符串。然后调用 .consolidate（） =noreferrer> SVGTransformList 界面，将可能长的转换列表合并为单个 SVG_TRANSFORM_MATRIX 的en-US / docs / Web / API / SVGTransformrel =noreferrer> SVGTransform c>其包含其矩阵属性中所有变换的归并版本。此 SVGMatrix per定义保存其属性 e 和 f 中翻译的值。

使用此函数 getTranslation（）可以重写D3 v3语句

  d3.transform（transformString）.translate; 
  

为

  getTranslation（transformString）; 
  

---

附录

因为这个答案随着时间的推移已经获得了一些兴趣，所以我决定组合一个更通用的方法，不仅可以返回转换，而且还可以返回转换字符串的所有转换定义的值。基本方法与上述原始文章中所述的相同，加上从 transform / decompose.js 。此函数将返回一个对象，该对象具有所有转换定义的属性，非常类似于前面的

snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

 function getTransformation（transform）{//创建一个虚拟g仅用于计算目的。这将永远不会附加到DOM，并且将在此函数//返回时被丢弃。 var g = document.createElementNS（http://www.w3.org/2000/svg，g）; //将transform属性设置为提供的字符串值。 g.setAttributeNS（null，transform，transform）; //将包含所有变换的SVGTransformList整合到SVG_TRANSFORM_MATRIX类型的单个SVGTransform，并获取其SVGMatrix。 var matrix = g.transform.baseVal.consolidate（）。matrix; //以下计算是从D3的模块d3-interpolate的私有函数// transform / decompose.js中进行的。 var {a，b，c，d，e，f} = matrix; // ES6，如果这不工作，使用下面的赋值// 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;如果（a * d  

In D3.js v4 the d3.transform method has been removed, without any hint about how replacing it. Does anyone know how to replace the following D3.js v3 instruction?

d3.transform(String).translate;

解决方案

Edit 2016-10-07: For a more general approach see addendum below.

---

According to the changelog it is gone. There is a function in transform/decompose.js, though, which does the calculations for internal use. Sadly, it is not exposed for external use.

That said, this is easily done even without putting any D3 to use:

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

This creates a dummy g element for calculation purposes using standard DOM methods and sets its transform attribute to the string containing your transformations. It then calls .consolidate() of the SVGTransformList interface to consolidate the possibly long list of transformation to a single SVGTransform of type SVG_TRANSFORM_MATRIX which contains the boiled down version of all transformations in its matrix property. This SVGMatrix per definition holds the values for the translation in its properties e and f.

Using this function getTranslation() you could rewrite your D3 v3 statement

d3.transform(transformString).translate;

as

getTranslation(transformString);

---

Addendum

Because this answer has gained some interest over time, I decided to put together a more general method capable of returning not only the translation but the values of all transformation definitions of a transform string. The basic approach is the same as laid out in my original post above plus the calculations taken from transform/decompose.js. This function will return an object having properties for all transformation definitions much like the former d3.transform() did.

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) * Math.PI/180,
    skewX: Math.atan(skewX) * Math.PI/180,
    scaleX: scaleX,
    scaleY: scaleY
  };
}

console.log(getTransformation("translate(20,30)"));  
console.log(getTransformation("rotate(45) skewX(20) translate(20,30) translate(-5,40)"));

这篇关于替换D3 v4中的d3.transform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！