Why doesn't this arrow function work in IE 11?
You're using arrow functions. IE11 doesn't support them. Use function
functions instead.
Here's Babel's translation of that to ES5:
g.selectAll(".mainBars").append("text").attr("x", function (d) {
return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
return +6;
}).text(function (d) {
return d.key;
}).attr("text-anchor", function (d) {
return d.part == "primary" ? "end" : "start";
});
Since none of the code uses this
, you don't have to worry about preserving arrow function this
behavior (since traditional functions get their this
by how they're called, but arrow functions close over this
). But if the code did use this
and you wanted it to behave like an arrow function would, you'd want to use the usual techniques for that.
Avoid use of arrow functions if you need to support IE 11 as it is not supported
Change those to regular functions and your code should work as you expect
g.selectAll(".mainBars").append("text").attr("x",function(d) {
return d.part=="primary"? -40: 40;
}).attr("y",function(d){
return +6;
}).text(function(d) {
return d.key;
}).attr("text-anchor", function(d) {
return d.part=="primary"? "end": "start";
});
In general, before arrow functions were arrow functions, they were regular JS function
s. So with IE11 we just have to take a step back in time
var fruits=["apple","banana","orange"];
var modernResult=fruits.find(e => e.includes("nana"));
console.log(modernResult);
var IEresult=fruits.find(function(e){return e.includes("nana")});
console.log(IEresult);
IE doesn't support the arrow notation as of now but there is a handy and fast way for transpiling your ES6
codes to ES5.1
for working in IE
. visit the Babel website then paste your codes in the left box and copy the right box code that is transpiled to the earlier version of JavaScript
.
For example, your code is transpiled to:
"use strict";
g.selectAll(".mainBars").append("text").attr("x", function (d) {
return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
return +6;
}).text(function (d) {
return d.key;
}).attr("text-anchor", function (d) {
return d.part == "primary" ? "end" : "start";
});