D3 transform helper to translate and scale more easily

transform.js

// inspired by https://github.com/d3/d3-zoom/blob/main/src/transform.js
class Transform() {
	static identity = new Transform(0,0,1)

	// https://stackoverflow.com/questions/70890280/d3-js-how-to-get-value-of-transform-attr
	static fromSelection(selection) {
		const translation = selection.node().transform.baseVal.getItem(0).matrix
		const scale = selection.node().transform.baseVal.getItem(1).matrix
		return new Transform(translation.e, translation.f, scale.a, scale.d)
	}

	constructor(x, y, kx, ky) {
		this.x = x
		this.y = y
		this.kx = kx
		this.ky = ky ?? kx
	}

	translate(x,y) {
		this.x = x
		this.y = y
		return this
	}

	scale(kx, ky) {
		this.kx = kx
		this.ky = ky ?? kx
		return this
	}

	toString() {
		let ret = ''
		if (this.x != 0 || this.y != 0) {
			ret += `translate(${this.x}, ${this.y})`
		}
		if (this.kx != 1 || this.ky != 1) {
			ret += `scale(${this.kx}, ${this.ky})`
		}
		return ret
	}
}

d3.selection.prototype.translate = function(x, y) {
	this.attr('transform', Transform.fromSelection(this).translate(x,y).toString())
}
d3.selection.prototype.scale = function(kx, ky) {
	this.attr('transform', Transform.fromSelection(this).scale(kx, ky ?? kx).toString())
}