この矢印機能が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視覚化のための2部グラフの使用

上記のステートメントで問題を引き起こしているこのコード d=>(d.part=="primary"? -40: 40)

矢印関数を使用しています。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";
});

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

一般に、矢印関数が矢印関数になる前は、通常のJSfunctionでした。したがって、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);

IEは現在、矢印表記をサポートしていませんが、で作業ES6するES5.1ためにコードをトランスパイルするための便利で高速な方法がありますIE。Babel Webサイトにアクセスし、左側のボックスにコードを貼り付けて、以前のバージョンのにトランスパイルされた右側のボックスコードをコピーしますJavaScript。

たとえば、コードは次のようにトランスパイルされます。

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