Why does this arrow function not work in IE 11?

Question

Below piece of code does not work in IE 11, it throws a syntax error in the console

g.selectAll(".mainBars")
    .append("text")
    .attr("x", d => (d.part == "primary" ? -40 : 40))
    .attr("y", d => +6)
    .text(d => d.key)
    .attr("text-anchor", d => (d.part == "primary" ? "end" : "start"));

Using d3.js bipartite chart for visualization

This code causing the issue in above statement d=>(d.part=="primary"? -40: 40)

Answer 1

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";
});

Answer 2

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";
});

Answer 3

In general, before arrow functions were arrow functions, they were regular JS functions. 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);

Answer 4

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";
});