为什么这个箭头功能在 IE 11 中不起作用？

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)

原文由 prakashkadakol 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

由于没有代码使用 this ，您不必担心保留箭头函数 this 行为（因为传统函数通过它们的方式获得它们的 this 重新调用，但箭头函数 关闭 this ）。但是，如果代码确实使用了 this 并且您希望它的行为像箭头函数那样，那么您需要为此使用 常用的技术。

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您需要支持 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";
});

原文由 Felipe Sabino 发布，翻译遵循 CC BY-SA 3.0 许可协议