[解決済み] IE 11でこの矢印機能が動作しないのはなぜですか？

質問

以下のコードは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)

どのように解決するのですか？

矢印関数を使用しています。IE11ではサポートされていません。使用方法 function 関数を使用してください。

ここで バベルの を 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 を使っていて、それを矢印関数のように動作させたい場合は を使うことになります。 を使うことになります。