"箭头功能"在IE中不起作用,为什么？

Question

下面的代码片段在IE 11中不起作用,它会在控制台中引发语法错误

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

使用d3.js二分图进行可视化

此代码导致上述声明中的问题 d=>(d.part=="primary"? -40: 40)

Answer 1

你正在使用箭头功能.IE11不支持它们.请改用function功能.

这是Babel对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";
});

Answer 2

一般来说，在箭头函数成为箭头函数之前，它们是常规的 JS function。所以对于 IE11，我们只需要及时退后一步

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 3

如果您需要支持IE 11,请避免使用箭头功能,因为它不受支持

将它们更改为常规函数,您的代码应该按预期工作

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