D3.js 如何获取转换属性的值

Question

我有一个小问题。在我的应用程序中，我使用 d3.js。我需要获取 transform 属性的值。我发现了同样的问题但我正在使用更新版本的库。我怎么才能得到它？因为：

<g class='myclass' transform='translate(30, 0)'>

...

d3.select('.myclass').attr('transform')

return 字符串。

translate(30, 0)

（我只需要获取数字 30 和 0）我没有找到任何相关函数。我可以使用正则表达式获取值，但我认为在这种情况下它太多了。必须有一些正常的方法来获取这些值。谢谢！

Answer 1

因为 <g> 元素 implements the SVGGraphicsElement interface it features a .transform property that allows access to the SVGAnimatedTransformList 包含对该元素的转换。鉴于您的代码中只有一种翻译，可以像这样访问它：

d3.select("g").node()
  .transform          // get the animated transform list
  .baseVal            // get its base value
  .getItem(0)         // get the first transformation from the list, i.e. your translate
  .matrix             // get the matrix containing the values

.matrix property is of type SVGMatrix 并在其 e 和 f 属性中包含组元素的翻译值。

看看下面的演示，看看它的实际效果：

const translate = d3.select("g").node() // get the node
                    .transform          // get the animated transform list
                    .baseVal            // get its base value
                    .getItem(0)         // get the first transformation from the list, i.e. your translate
                    .matrix             // get the matrix containing the values
                    
console.log(`Translate x: ${translate.e}, y: ${translate.f}`);

<script src="https://d3js.org/d3.v7.js"></script>
<svg>
  <g transform='translate(30, 0)'></g>
</svg>

D3.js 如何获取转换属性的值

D3.js How to get value of transform attr

javascript

transform

d3.js