我有一個小問題。在我的應用程式中，我使用的是 d3.js。我需要獲取轉換屬性的值。我發現了同樣的問題How to log rotate attribute in transform using d3.js? 但我正在使用更新版本的庫。我怎么才能得到它？因為：
<g class='myclass' transform='translate(30, 0)'>
...
d3.select('.myclass').attr('transform')
回傳字串。
translate(30, 0)
（我只需要得到數字 30 和 0）我沒有找到任何功能。我可以使用正則運算式獲取值，但在這種情況下我認為它太多了。必須有一些正常的方法來獲取這些值。謝謝！
uj5u.com熱心網友回復：
由于<g>元素實作了SVGGraphicsElement介面，它具有一個.transform屬性，允許訪問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屬性是型別，并在其和屬性SVGMatrix中包含組元素的翻譯值。ef
看看下面的演示，看看它的實際效果：
顯示代碼片段
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427207.html
標籤：javascript d3.js 转变
上一篇：y軸下方的條形圖出血D3.js