Why doesn't this arrow function work in IE 11?

internet-explorer, javascript

Solution

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.

Problem

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)`

Original source

Related problems