fix(build): Fix this keyword transpile

- Make arrow function to be wrapped as '.bind(this)'
https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions#spec
- Update Axis 'this' code to make transpiled correctly

Fix #2671
Close #2664
Close #2665 
Close #2666 
Close #2667

babel.config.cjs

@@ -28,6 +28,10 @@ module.exports = function(api) {
 			"@babel/plugin-proposal-class-properties", {
 				"loose": true
 			}
+		], [
+			"@babel/plugin-transform-arrow-functions", {
+				"spec": true
+			}
 		],
 		"@babel/proposal-object-rest-spread",
 		"add-module-exports",

package.json

@@ -95,12 +95,12 @@
 		"d3-zoom": "^3.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.17.9",
+		"@babel/core": "^7.17.10",
 		"@babel/eslint-parser": "^7.17.0",
 		"@babel/plugin-proposal-class-properties": "^7.16.7",
 		"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
 		"@babel/plugin-transform-runtime": "^7.17.0",
-		"@babel/preset-env": "^7.16.8",
+		"@babel/preset-env": "^7.17.10",
 		"@babel/preset-typescript": "^7.16.7",
 		"@babel/runtime": "^7.17.9",
 		"@commitlint/cli": "^15.0.0",
@@ -170,7 +170,7 @@
 		"karma-webpack": "^5.0.0",
 		"lite-fixture": "^1.0.2",
 		"mini-css-extract-plugin": "^2.6.0",
-		"mocha": "^9.2.2",
+		"mocha": "^10.0.0",
 		"node-sass": "^7.0.1",
 		"regenerator-runtime": "^0.13.7",
 		"rollup": "^2.70.2",

src/ChartInternal/Axis/AxisRenderer.ts

@@ -46,10 +46,10 @@ export default class AxisRenderer {
 	 */
 	create(g: d3Selection): void {
 		const ctx = this;
-		const {config, helper, params} = this;
+		const {config, helper, params} = ctx;
 		const {scale} = helper;
 		const {orient} = config;
-		const splitTickText = this.splitTickText.bind(this);
+		const splitTickText = this.splitTickText.bind(ctx);
 		const isLeftRight = /^(left|right)$/.test(orient);
 		const isTopBottom = /^(top|bottom)$/.test(orient);