为什么这个箭头函数在 IE11中不起作用？

下面的代码在 IE11中无法工作，它在控制台中抛出一个语法错误

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)中的问题

116393 次浏览
小开
最佳答案

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

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

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

Internet Explorer(IE) doesn't support the ES6 functions at all, but you could install BabelJS. But you can also write the vanillaJS functions instead.

For example:

const hasBrownEyes = eye.color === "brown" ? true : false

Or just vanilla.js:

var hasBrownEyes = false; // default answer, it will be overwritten if it has a brown eye


if (eye.color === "brown") {
return true;
}

提交答案