在 D3 v4 中替换 d3.transform

Posted 2023-02-22

【中文标题】在 D3 v4 中替换 d3.transform

【英文标题】：Replacing d3.transform in D3 v4

【发布时间】：2016-11-08 13:21:10

【问题描述】：

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

d3.transform(String).translate;

【问题讨论】：

你用 d3.transform() 做什么？

解析转换属性的值，以获取 svg 的坐标。

只使用 .attr();查找坐标只需使用 .attr('x') 和 .attr('y')

根据变更日志，它已经消失了。 transform/decompose.js 中有一个函数，其计算仅供内部使用。遗憾的是，它没有外露。

我必须澄清这个问题：我有一组元素（ ）被翻译和/或旋转。因此，代码类似于 。 d3.transform(String) 返回一个对象，其字段表示组的平移（即 X、Y）、它们的旋转等。我知道我可以获得变换属性的值并解析它的值，但我一直在寻找一些等效的 d3 指令。

【参考方案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 属性设置为包含您的转换的字符串。然后它调用SVGTransformList 接口的.consolidate() 以将可能很长的转换列表合并为SVG_TRANSFORM_MATRIX 类型的单个SVGTransform，其中包含其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)"));

【讨论】：

很好的答案。我的猜测是，博斯托克先生删除了它的公共性，因为实现自己是微不足道的。

@Mark 同意，但如果您要从矩阵中检索其他转换，例如 rotate，则需要更多的微积分。我很高兴再次看到它。

完美运行。我想知道为什么他们取消了一个如此有用的方法。通常，库本身允许设置参数和检索有关此设置的信息。

@MehdiElFadil 感谢您的编辑！这是一个如此明显的错误。我不知道它是怎么偷偷溜进来的……

【参考方案2】：

我找到了比这更简单的解决方案。

selection.node().transform.baseVal[0].matrix

在这个矩阵中，坐标 e 和 f 相当于 x, y。 （e === x，f === y）。无需为此实现您自己的功能。

baseVal 是元素转换的列表。 你不能将它用于没有预先转换的对象！ （列表将为空） 或者，如果您对对象进行了多次转换，则最后一个位置将位于 baseVal 列表的最后一个元素之下。

【参考方案3】：

如果通过npm拉入d3 v4，可以直接导入src/transform/parse文件，调用parseSvg：

// using es2015 modules syntax
import  parseSvg  from "d3-interpolate/src/transform/parse";

parseSvg("translate(20, 20)");

【参考方案4】：

在具有 d3.js zoom 侦听器的元素上——通常是附加到 svg 元素的 <g> 元素——您可以使用此调用在缩放函数之外获取转换属性：

var self = this;
var t = d3.zoomTransform(self.svg.node()); 

// t = k: 1, x: 0, y: 0 or your current transformation values

这将返回与在缩放事件函数本身中调用 d3.event.transform 时相同的值。

在缩放事件函数之外调用d3.event.transform会报错： Uncaught TypeError: Cannot read property 'transform' of null

我必须使用d3.zoomTransform 来允许从图表外的按钮进行平移和缩放。

【参考方案5】：

我参加聚会有点晚了，但我有一些对我有益的代码，我希望它也能帮助你。

@altocumulus 上面的代码非常详尽，而且效果很好。然而，它并不能完全满足我的需求，因为我是手动进行计算并且需要尽可能轻松地更改一些变换属性。

这可能不是适合所有人的解决方案，但对我来说是完美的。

function _getTokenizedTransformAttributeValue(transformStr) 
    var cleanedUpTransformAttrArr = transformStr.split(')', ).slice(0,-1);

    return cleanedUpTransformAttrArr.reduce(function(retObj, item)  
        var transformPair = item.split('(');

        retObj[transformPair[0]] = transformPair[1].split(',');

        return retObj;
    , );

 

function _getStringFromTokenizedTransformAttributeObj(transformAttributeObj) 
    return Object.keys(transformAttributeObj).reduce(function(finalStr, key) 
        // wrap the transformAttributeObj[key] in array brackets to ensure we have an array
        // join will flatten the array first and then do the join so [[x,y]].join(',') -> "x,y"
        return finalStr += key + "(" + [transformAttributeObj[key]].join(',') + ")"; 
     , '');

第一个功能的真正好处是我可以手动更改特定属性（例如旋转），而不必担心它如何影响平移或其他任何事情（当围绕一个点旋转时），而当我依赖在内置甚至d3.transform 方法上，它们将所有属性合并为一个值。

为什么这么酷？

想象一个 html

<g class="tick-label tick-label--is-rotated" transform="translate(542.8228777985075,0) rotate(60, 50.324859619140625, 011.402383210764288)" style="visibility: inherit;"></g>

使用 d3.transfrom 我得到：

对象形式

jr rotate: 59.99999999999999, translate: [577.8600589984691, -37.88141544673796], scale: [1, 1], skew: 0, toString: function 

字符串形式

"translate(577.8600589984691,-37.88141544673796)rotate(59.99999999999999)skewX(0)scale(1,1)"

这在数学上是正确的，但让我很难简单地删除旋转角度和必须引入以围绕给定点旋转该元素的平移。

使用我的_getTokenizedTransformAttributeValue 函数

对象形式

translate: ["542.8228777985075", "0"],  rotate: ["60", " 50.324859619140625", " 011.402383210764288"]

以字符串形式使用函数_getStringFromTokenizedTransformAttributeObj

"translate(542.8228777985075,0)rotate(60, 50.324859619140625, 011.402383210764288)"

这是完美的，因为现在当您移除旋转时，您的元素可以回到原来的位置

当然，代码可以更简洁，函数名称也可以更简洁，但我真的很想把它拿出来，这样其他人就可以从中受益。

【参考方案6】：

我找到了一种方法来实现类似的东西：

d3.select(this).node().getBBox();

这将使您可以访问 x/y 位置和宽度/高度 你可以在这里看到一个例子：https://bl.ocks.org/mbostock/1160929

【讨论】：

你可以简单地做this.getBBox(); ...不需要d3选择。