D3 4.9.1为.style("transform")返回不同的值

问题描述

在d3 4.9.1中，如果我进行调用以获取具有以下样式的元素的变换:

In d3 4.9.1 if I make call to get transform of element that has style like this:

<g style="transform: translateX(3.84559px);"></g>

操作:

d3.select(this).style("transform")

d3v4.9.1中的输出:

Output in d3v4.9.1 :

translateX(3.84559px)

但是在d3v4.8.0中，它具有不同的输出:

But in d3v4.8.0 it has different output:

matrix(1, 0, 0, 1, 3.84559, 0)

此新版本中是否存在引起此问题的任何更改?

Is there any change in this new version that is causing this issue?

我当时具有查找变换属性的不同参数的功能，该参数现在已损坏:

I was having function to find different parameters of transform property, which is now broken:

contents.getTransformation = function (transform) {
    // console.log(transform);
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
    g.setAttributeNS(null, "transform", transform);
    var matrix = g.transform.baseVal.consolidate().matrix;
    var a = matrix.a;
    var b = matrix.b;
    var c = matrix.c;
    var d = matrix.d;
    var e = matrix.e;
    var f = matrix.f;
    var scaleX = Math.sqrt(a * a + b * b);
    var scaleY = Math.sqrt(c * c + d * d);
    var skewX = a * c + b * d;
    if (scaleX) {
        a /= scaleX;
        b /= scaleX;
    }
    if (skewX) {
        c -= a * skewX;
        d -= b * skewX;
    }
    if (scaleY) {
        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
    };
};

引用:在D3 v4中替换d3.transform

推荐答案

v4.9.0 拥有它:

由于在<g>上指定了内联样式，因此在使用v4.9.1版本时将返回此值.以前的版本始终返回计算出的样式.

Since you specified an inline style on your <g> this value will be returned when using version v4.9.1. Prior versions always returned the computed style.

这篇关于D3 4.9.1为.style("transform")返回不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！