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

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